On hover change multiple elements data in vue framework

Question

I'm new to vue! I have 3 divs, All divs have a message data (One source)! I've bind a method, that when hover on one div it will change the message! The thing is working fine, but it change all div's message! And I know it's logical! But How can I only changed on that hovered element data! Not affecting others!

Here is my JSFiddle.

Html Is :

<div id="app">
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
</div>

Vue :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },

  methods : {
      change : function() {
      this.message = "Changed"
    }
  }


}

)

It makes no sense since message will be changed in all divs. — Jonatas Walker
– Jonatas Walker, Commented Mar 10, 2017 at 17:44

awei · Accepted Answer · 2017-03-10 22:52:19Z

1

You need to create separate data bindings, one for each message div. There are a number of ways to solve this. The best solution depends on your use case. But, here's a simple solution:

Template:

<div id="app">
  <div class="one" v-on:mouseover="change('foo', 'this is a message')">
    {{ messages.foo }}
  </div>
  <div class="one" v-on:mouseover="change('bar', 'here is a different message')">
    {{ messages.bar }}
  </div>
  <div class="one" v-on:mouseover="change('baz', 'message for baz')">
    {{ messages.baz }}
  </div>
</div>

Vue component:

new Vue({
  el: '#app',
  data: function () {
    return { messages: {} }
  },

  methods : {
    change : function(key, message) {
      this.$set(this.messages, key, message)
    }
  }
})

answered Mar 10, 2017 at 22:52

awei

1,16410 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

On hover change multiple elements data in vue framework

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related