v - すべての部門にアクションを適用させるため

Question

以前は、Vueでカスタムのトランケートフィルターを削除することについて質問しました。ここで問題ご覧ください。

Removing a Vue custom filter on mouseover

をしかし、私は、V-ためのループを使用していますが、私は1つのdivにカーソルを合わせると、私はループ内のすべてのdivを持っていることに気付いていますことを言及するのを怠っ同じ行動が彼らに適用されました。私は上に乗っているdivだけをどのように対象にするのか分かりません。ここに私のテンプレートです：

<div id="tiles"> 
    <button class="tile" v-for="(word, index) in shuffled" @click="clickWord(word, index)" :title="word.english"> 
     <div class="pinyin">{{ word.pinyin }}</div> 
     <div class="eng" @mouseover="showAll = true" @mouseout="showAll = false"> 
     <div v-if="showAll">{{ word.english }}</div> 
     <div v-else>{{ word.english | truncate }}</div> 
     </div> 
    </button> 
    </div> 

、データが返される：あなたはVueのを知っている場合

data(){ 
    return { 
     currentIndex: 0, 
     roundClear: false, 
     clickedWord: '', 
     matchFirstTry: true, 
     showAll: false, 
    } 
    }, 

、私はアドバイスのために感謝されます。ありがとう！

Answer 1

この例では、word.english値の完全なテキストを表示するかどうかを決定するために、v-forによって生成された各ボタンにshowAllが使用されています。これは、.engクラスdivsのmouseoverイベントが発生するたびに、すべてのボタンに対して同じshowAllプロパティがtrueに設定されていることを意味します。

---

私が最初にnullに設定showWordIndexプロパティでshowAllブール値を置き換えます：

data() { 
    showWordIndex: null, 
}, 

そしてテンプレートで、mouseoverハンドラに単語のindexにshowWordIndexを設定する（とmouseleaveハンドラ内のnull）：

<button v-for="(word, index) in shuffled" :key="index"> 
    <div class="pinyin">{{ word.pinyin }}</div> 
    <div 
    class="eng" 
    @mouseover="showWordIndex = index" 
    @mouseout="showWordIndex = null" 
    > 
    <div v-if="showWordIndex === index">{{ word.english }}</div> 
    <div v-else>{{ word.english | truncate }}</div> 
    </div> 
</button> 

Here's a working fiddle.

---

さらに良い小道具として子コンポーネントに各wordオブジェクトのプロパティを渡し、v-forでレンダリングされているすべての機能やテンプレートをカプセル化する新しいコンポーネントを作成することです。

このようにして、あなたの例のようにshowAllプロパティを使用しますが、子コンポーネントの有効範囲に定義します。したがって、showAllプロパティは、関連するコンポーネントのインスタンスにのみ影響します。

Vue.component('tile', { 
 
    template: '#tile', 
 
    props: ['pinyin', 'english'], 
 
    data() { 
 
    return { showAll: false }; 
 
    }, 
 
    filters: { 
 
    truncate: function(value) { 
 
     let length = 50; 
 
     if (value.length <= length) { 
 
     return value; 
 
     } else { 
 
     return value.substring(0, length) + '...'; 
 
     } 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     words: [ 
 
     {pinyin: 1, english: "really long string that will be cut off by the truncate function"}, 
 
     {pinyin: 2, english: "really long string that will be cut off by the truncate function"}, 
 
     {pinyin: 3, english: "really long string that will be cut off by the truncate function"}, 
 
     {pinyin: 4, english: "really long string that will be cut off by the truncate function"}, 
 
     ], 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script> 
 
<div id="app"> 
 
    <tile v-for="word, i in words" v-bind="word" :key="word"></tile> 
 
</div> 
 

 
<script id="tile" type="x-template"> 
 
    <button :title="english"> 
 
    <div class="pinyin">{{ pinyin }}</div> 
 
    <div class="eng" @mouseover="showAll = true" @mouseout="showAll = false"> 
 
     <div v-if="showAll">{{ english }}</div> 
 
     <div v-else>{{ english | truncate }}</div> 
 
    </div> 
 
    </button> 
 
</script>

：以下

はその一例です

Answer 2

これを行うには、計算されたプロパティを使用することはできません（私が最初に提案したように、あなたがリンクしている私の答えで示唆したように）、あなたがいるコンテキストを認識する必要があるので、それぞれのインスタンスにshowAllプロパティを適用すると、フィルタを使用できます。これをデータモデルで前に宣言すると、プロパティは反応的になり、マウスオーバーとマウスアウトで個々に各項目を切り替えることができます。

テンプレート：

<div id="app"> 
    <div id="tiles"> 
    <div class="tile" v-for="(word, index) in shuffled" :title="word.english"> 
     <div class="pinyin">{{ word.pinyin }}</div> 
     <div class="eng" @mouseover="word.showAll = true" @mouseout="word.showAll = false"> 
     {{ word.english | truncate(word) }} 
     </div> 
    </div> 
    </div> 
</div> 

JS：

new Vue({ 
    el: '#app', 
    data() { 
     return { 
      shuffled: [ 
       { english: 'here', showAll: false}, 
       { english: 'are', showAll: false }, 
       { english: 'there', showAll: false }, 
       { english: 'words', showAll: false } 
      ], 
      currentIndex: 0, 
      roundClear: false, 
      clickedWord: '', 
      matchFirstTry: true, 
     } 
    }, 
    filters: { 
     truncate: function(value, word) { 
      console.log(word) 
      let length = 3; 
      if (word.showAll || value.length <= length) return value; 

      return value.substring(0, length) + '...'; 
     } 
    }, 
}) 

JSFiddle

キーは各単語のインスタンスにshowAllを適用することで、その後、バックフィルタにその単語インスタンスを渡すための作業を参照してください。 showAllプロパティの値を確認することができます。あなたがそれを正面から宣言している限り、Vueの反応性システムがあなたのために残りを処理します。

この例では、v-if/elseで2つの要素を使用する必要はありません。フィルタ付きの1つの要素は完全に機能します。