vue.jsはマウスオーバーでアニメーションgifをjpgに置き換えます。

Question

vue.jsでレンダリングされたビデオポスター画像/ jpgのリストがあります。これらの画像の上にマウスを置くと、gifアニメーションに置き換えられます。私はmouseoutでimage/jpgをもう一度見たいと思う。だから私は、マウスオーバー/アウトイベントを追跡するが、期待通りにSRC属性を交換しても動作しないことができたの運賃：

<div v-for="video in videos"> 
    <img 
     v-on:mouseover="mouseOver(video.id)" 
     v-on:mouseout="mouseOut(video.id)" 
     v-bind:src="mouse[video.id] === 1 ? 'images.gif' : 'images.gif'" 
    />  
</div> 


var app4 = new Vue({ 
    el: '#app-videomanager', 
    router, 
    data: { 
    mouse: {} // the id is alphanumeric 
    }, 
    computed: { 
    videos() { 
     return store.state.videos; // not included in the example 
    } 
    }, 
    methods: { 
    mouseOver: function(id) { 
     this.mouse[id] = 1; 
    }, 
    mouseOut: function(id) { 
     this.mouse[id] = 0; 
    } 
    } 
}); 

それマウスオーバーとマウスアウト関数内SRC属性を置き換えるために理にかなっての代わりに、あまりにも多くのロジックをコンポーネントテンプレートに入れていますか？ vue.jsでDOMのこの部分をどのように操作できますか？ここで

Answer 1

は、ソリューションです：

は、コンポーネントでmouseOverCheckを宣言します。私はdataプロパティではなく機能であると宣言される方法を変更することに注意してください：あなたのHTMLで次に

data() { 
    return { 
     mouseOverCheck: '' 
    } 
} 

、次の操作を行います。あなたはそれを宣言するとき

<img 
    v-on:mouseover="mouseOverCheck = video.id" 
    v-on:mouseout="mouseOverCheck = ''" 
    v-bind:src="mouseOverCheck === video.id ? 'images.gif' : 'images.jpg'" />