Vue.jsのv-forループ内のmouseenter/mouseleaveイベントの要素のクラスを変更します

Question

mouseenter/mouseleaveイベントでv-forループ内の単一要素のクラスを変更しようとしていますが、混乱していますそれがどのようにして、つかまれている要素のクラスだけが変更されるようにするか。

クラスを変数にバインドしようとしましたが、明らかにリストのすべての要素が変更されます。

<template> 
    <ul> 
    <li class="item" v-for="item in items" @mouseenter="showInfoBar()" @mouseleave="hideInfoBar()"> 
     <span class="infobar" :class="{ show : infoBar }"> </span> 
    </li> 
    </ul> 
</template> 

<script> 
export default { 
    name: 'ItemsList', 
    props: ['items'], 
    data() { 
    return { 
     infoBar: false 
    } 
    }, 
    methods: { 
    showInfoBar() { 
     this.infoBar = true 
    }, 
    hideInfoBar() { 
     this.infoBar = false 
    } 
    } 
} 
</script> 

Answer 1

問題は、彼らが独立して制御する必要があるときにinfoBar、すべての情報バーの状態を表すしていることです。

infoBarを配列に変換します。それぞれの要素がインフォメーションバーの状態を表し、それぞれのインデックスが問題を解決するはずです。

<template> 
    <ul> 
    <li class="item" v-for="(item, index) in items" @mouseenter="showInfoBar(index)" @mouseleave="hideInfoBar(index)"> 
     <span class="infobar" :class="{ show : infoBar[index] }"> </span> 
    </li> 
    </ul> 
</template> 

<script> 
export default { 
    name: 'ItemsList', 
    props: ['items'], 
    data() { 
    return { 
     infoBar: [] 
    } 
    }, 
    mounted: function() { 
    for(var i = 0; i < this.items.length; i++) { 
     this.infoBar.push(false); 
    } 
    }, 
    methods: { 
    showInfoBar(index) { 
     this.infoBar[index] = true; 
    }, 
    hideInfoBar(index) { 
     this.infoBar[index] = false; 
    } 
    } 
} 
</script> 

Answer 2

Iの代わりの状態を処理する各コンポーネントに各コンポーネントの状態を残すために、より良いやり方である、私が意味する、代わりの配列としてこれを扱うの、より良いアプローチは、分離された成分としてそれを処理すべきであると思います配列内の "コンポーネント"のコレクションは、私はこのアイデアに反応することに基づいています、ItemsListとItemを別のコンポーネントとして宣言することができますし、それぞれのアイテム、別の状態のために、がんばろう。

版あなたのコードをリファクタリング後のコード

を読んだ後、私はちょうどtoggleMethod()を宣言し、国家の現在の値に論理否定を行い、代わりに二つの異なる方法で変化する状態を扱うのも、考えてあなたは瞬間を見ている。

これは良いです。この

function showState() { 
    this.someState = true; 
} 
function hideState() { 
    this.someState = false; 
} 

幸運のチームメイトより

function toggleState() { 
    this.someState = !this.someState; 
} 

。