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

Question

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?

Even if Neves' solution is correct, it is more or less what I already had done. The problem was caused by the <div> being wrapped in another <div>, to which a Vue object was applied. (I don't know if it's understandable, sorry for my bad English) — Algorythmis
– Algorythmis, Commented Nov 11, 2016 at 15:22

Neves · Accepted Answer · 2016-11-11 12:35:32Z

4

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>

answered Nov 11, 2016 at 12:35

Neves

1702 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Algorythmis Over a year ago

It was exactly what I had done... except I was wrapping it in another <div> in order to apply a dynamic style with Vue.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related