关于悬停更改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 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) 
    } 
    } 
})