删除鼠标悬停的Vue自定义过滤器 [英] Removing a Vue custom filter on mouseover

问题描述

我想使用VueJS 2删除鼠标悬停的截断过滤器。这是我在模板中的过滤器：

I would like to remove a truncate filter on mouseover using VueJS 2. Here is my filter in the template:

<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不被截断？谢谢！

Is there a way to remove the filter on the mouseover event so that the div is not truncated anymore? Thanks!

编辑： showAll（）函数是我以为我会删除它的地方。我尝试了几种方法来删除过滤器，如：

The showAll() function is where I thought I would remove it. I tried a couple ways to remove the filter such as:

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

和：

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

但这是我迷失的地方。

but this is where I am lost...

推荐答案

使 showAll 一个布尔数据属性，并使用 template 标签，以确定哪个版本的 word.english 通过 v-if 和 v-else 指令：

Make showAll a Boolean data property and use template tags to determine which version of word.english to display via the v-if and v-else directives:

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

这是一个工作小提琴。

这篇关于删除鼠标悬停的Vue自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！