javascript - 在鼠标悬停时删除 Vue 自定义过滤器

Question

我想使用 VueJS 2 删除鼠标悬停时的 chop 过滤器。这是我在模板中的过滤器:

<div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div>

这是过滤器本身:

filters: {
    truncate: function(value) {
      let length = 50;
      if (value.length <= length) {
        return value;
      } else {
        return value.substring(0, length) + '...';
      }
    }
 },

有没有办法删除鼠标悬停事件的过滤器，使 div 不再被 chop ？谢谢!

编辑:showAll() 函数是我想删除它的地方。我尝试了几种方法来删除过滤器，例如:

showAll(){
  console.log('being mousedover');
  this.truncate = false
},

和:

showAll(){
  console.log('being mousedover');
  !this.truncate
}

但这就是我迷路的地方......

Answer 1

使 showAll 成为一个 bool 数据属性，并使用 template 标签来确定通过 v 显示哪个版本的 word.english -if 和 v-else 指令:

<div class="eng" @mouseover="showAll = true">
  <template v-if="showAll">{{ word.english }}</template>
  <template v-else>{{ word.english | truncate }}</template>
</div>

Here's a working fiddle.