VueJs 2.x Refs Explained Easiest way

    By: Manu
    4 years ago
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Vue Project</title>
    	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    	<meta content="utf-8" http-equiv="encoding">
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="app" class="container">
    		<div class="col-md-6 col-md-offset-3 mb-9" style="margin-bottom:100px;	">
    			<button v-on:click='changeGame'>Button</button>
    			
    		</div>	
    	</div>
    </body>
    <script type="text/javascript">
    	
    	new Vue({
    		  el:'#app',
    		  data: {
    		  	gameOn:true,
    		  	penalty:false,
    		  },
    		  watch:{
    		  	 gameOn(value){
    		  	 	alert(this.penalty);
    		  	 }
    		  },
    		  methods:{
    		  	changeGame(){
    		  		this.gameOn = false;
    		  	}
    		  }
    	});
    
    
    </script>
    </html>
    

    Check Guide here