Vue test events

by Ben Clayton

HTML

<div id="app">
  
  <div :class="{'over':outerobj.over}" @mouseover="mouseover(outerobj)" @mouseout="mouseout(outerobj)"  class="outer">
  
  <div  :class="{'over':innerobj1.over}" @mouseover="mouseover(innerobj1)" @mouseout="mouseout(innerobj1)"  class="button"></div>
  <div  :class="{'over':innerobj2.over}" @mouseover.stop="mouseover(innerobj2)" @mouseout.stop="mouseout(innerobj2)"  class="button"></div>
  
  </div>
 
  
 </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height:100vh;
}

.outer {
  display: block;
  position: absolute;
  width: 30vw;
  height:30vw;
  background-color: rgba(230,230,230,1);
  border: 1px solid red;
  top: 10vh;
  left: 10vw;
  transition: top 3s;
}

.outer.over {
  border: 3px solid red;  
}

.outer:hover {
  top: 50vh;
}

.button {
  display: inline-block;
  margin:10px;
  width:60px;
  height:60px;
  border: 1px solid red;
}
.button.over {
   border: 2px solid red;
}

Vue

new Vue({
  el: "#app",
  data: {
  	outerobj:{over:false},
  	innerobj1:{over:false},
    innerobj2:{over:false}
    
  },
  methods: {
  	mouseover: function(obj){
    	obj.over = true;
    	console.log("mouseover",todo);
    },
    mouseout: function(obj){
    	obj.over = false;
    	console.log("mouseout",todo);
    },
    mouseenter: function(obj){
    	console.log("mouseenter",todo);
    }
  }
})