關於懸停更改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) 
    } 
    } 
})