CODEWITHSUNDEEP
javascripthtmlvue.js
Algorythmis
Algorythmis

Reputation: 672

How to dynamically change a text when hovering an element with Vue.js?

I have this in my HTML page :

<div class="hello">
  <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" />
  <img @mouseover="hover='B'" @mouseleave="hover=''" src="b.png" alt="B" />
  <br /><br />
  <span>{{ hover }}</span>
</div>

and this in my script :

var hello = new Vue({
  el: ".hello",
  data: {
      hover: ''
  }
});

But the text does not change when I hover an image. I tried with a <span> wrapping each image, but it does not work either.

What do I do?

Upvotes: 1

Views: 5571

Answers (1)

Neves
Neves

Reputation: 170

new Vue({
  el: '.hello',
  data: {
    hover: ''
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<div class="hello">
  <img @mouseover="hover='A'" @mouseleave="hover=''" src="http://lorempixel.com/400/200/sports/1" alt="a">
  
  <img @mouseover="hover='B'" @mouseleave="hover=''" src="http://lorempixel.com/400/200/sports/2" alt="B">
  
  <br>
  
  <span>Hover: {{ hover }}</span>
</div>

Upvotes: 4

Related Questions