以前我问了一下的Vue中删除自定义过滤器截断问题。 请看到这里的问题：
拆卸鼠标悬停在Vue的自定义过滤器
然而，我忘了提，我使用的是V-for循环，当我将鼠标悬停在一个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>
而返回的数据：
data(){
return {
currentIndex: 0,
roundClear: false,
clickedWord: '',
matchFirstTry: true,
showAll: false,
}
},
如果你知道Vue的，我会的意见表示感谢。 谢谢！
在你的例子， showAll被用于每个由V为生成的按钮中的，以确定是否要显示的完整文本word.english值。 这意味着，只要mouseover任何事件.eng类的div火灾，同样showAll属性被设置为true每个按钮。
我将取代showAll用一个布尔值showWordIndex最初设置属性null ：
data() {
showWordIndex: null,
},
然后在模板，设置showWordIndex到index上的字的mouseover处理程序（和null的mouseleave处理）：
<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>
这里有一个工作提琴。
更妙的是，使一个新的组件封装的功能，一切的模板中所呈现v-for ，每个传递的属性word对象到子组件作为道具。
这样，你仍然会使用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>
为了做到这一点，你不能使用计算属性（我在你挂我的回答原来建议的），因为你需要知道你是在上下文的。这就是说，你可以使用如果你申请一个过滤器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。 带有过滤器的单个元素完美的作品。
