javascript - 悬停时更改 vue 框架中的多个元素数据

Question

我是 vue 新手!我有 3 个 div，所有 div 都有消息数据(一个来源)!我绑定(bind)了一种方法，当将鼠标悬停在一个 div 上时，它会更改消息!事情工作正常，但它改变了所有 div 的消息!我知道这是合乎逻辑的!但是我怎么能只改变悬停的元素数据呢!不影响别人!

这是我的 JSFiddle .

HTML 是:

<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"
    }
  }


}

)

Answer 1

您需要创建单独的数据绑定(bind)，每个消息 div 一个。有多种方法可以解决这个问题。最佳解决方案取决于您的用例。但是，这里有一个简单的解决方案:

模板:

<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 组件:

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

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