vue框架中悬停改变多元素数据的研究

Question

我是vue新手！我有3个div，所有div都有一个消息数据(一个来源)！我绑定了一个方法，当鼠标悬停在一个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

您需要创建单独的数据绑定，每个消息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)
    }
  }
})