VueJS v-if = array [index]が機能しない

Question

マウスが画像の上にあるときにテキストボックスを取得するコンポーネントを作っていました。

以下はHTMLテンプレートです。

<section class="item-container" v-for="(item, index) in items"> 
    <div class="image-box" @mouseenter="changeStatus(index)"> 
    <img class="image" src="item.link" alt> 
    </div> 
    <div class="text-box" @mouseleave="changeStatus(index)" v-if="show[index]"> 
    <h4>{{ item.name }}</h4> 
    <p>{{ item.content }}</p> 
    </div> 
</section> 

以下app.js

new Vue({ 
    el: '#app', 
    data: { 
    show: [false, false, false], 
    items: [ 
     { 
     name: 'Author 1', 
     content: 'Content 1' 
     }, 
     { 
     name: 'Author 2', 
     content: 'Content 2' 
     }, 
     { 
     name: 'Author 3', 
     content: 'Content 3' 
     } 
    ] 
    }, 
    methods: { 
    changeStatus: function(index) { 
     this.show[index] = !this.show[index]; 
     console.log(this.show); 
     console.log(this.show[index]); // console gets it as expected 
    } 
    } 
}); 

である私はコードの上に実行すると、私はショーのプロパティが変更されたことを見つけることができます。ただし、v-ifは更新されません。 v-ifにarray [index]を使用できないのですか、それとも別の理由がありますか？

Answer 1

問題はv-ifではありません。これは、Vueが配列要素の変更を直接検出できないためです。これはJavaScriptの制限の1つです。

したがって、Vueが、これはthis.show[index] = !this.show[index]

Vue.set(this.show, index, !this.show[index])

に、それが動作するはずVue.set

の変更のように、このためのいくつかのヘルパー関数を提供します。

Vue.setは唯一の解決策ではありません。これを実現する方法はいくつかあります。

JavaScript配列のネイティブメソッドを使用すると、Vueはこれらのメソッドをフックして変更を検出できます。ここで

は、もう一つの方法は、完全配列を交換することである.splice

this.show.splice(index, 1, !this.show[index])

の使用方法の一例です。あなたはES6を使用している場合は、簡単に、配列のクローンを作成するために、拡散演算子を使用することができます。

this.show[index] = !this.show[index] 
this.show = [...this.show] 

.mapをも動作します、それは新しい配列

this.show = this.show.map((el, i) => 
    i === index ? !el : el 
) 

Answer 2

を返すので、あなたはJS オブジェクトを使用することができますの配列の代わりに同じ効果が得られます。つまり、show: [false, false, false],をshow: {0:false, 1:false, 2:false},に置き換えます。