ホバー上では、vueフレームワーク内の複数の要素データを変更します

Question

私はvueの新機能です！私には3つのdivがあり、すべてのdivにはメッセージデータがあります（1つのソース）！私はメソッドをバインドしました。ある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> 

ヴュ：

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

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


} 

) 

Answer 1

あなたは、各メッセージのdivのための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) 
    } 
    } 
})