2017-07-19 205 views
3

删除Vue的自定义过滤器,我想利用VueJS 2.鼠标悬停在这里删除截断过滤器是我的模板过滤器:鼠标悬停

<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) + '...'; 
     } 
    } 
}, 

有没有办法在mouseover事件中删除过滤器,以便div不会被截断?谢谢!

编辑:showAll()功能是我认为我会删除它的地方。我尝试了几种方法去除过滤器,例如:

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

和:

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

但是这是我迷路了......

+0

当你将鼠标放置做任何事情发生吗?你可以包含'showAll'的代码吗? – Libby

回答

2

showAll布尔数据属性和使用template标签来确定要通过v-ifv-else指令显示哪个版本的word.english

<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.

0

这应该有效。

data(){ 
    return { 
     shouldTruncate: true 
    } 
}, 
methods: { 
    showAll() { 
     this.shouldTruncate = false 
    } 
}, 
filters:{ 
    truncate(value) { 
     let length = 50; 
     if (value.length <= length || !this.shouldTruncate) { 
      return value; 
     } 
     else { 
      return value.substring(0, length) + '...'; 
     } 
    } 
} 
2

处理这种问题的最简单方法是设置一个布尔标志,然后根据该标志的潜在存在性过滤计算属性。这允许您缓存该值,并且只需要一个元素而不是两个条件观察器。

HTML

<div class="eng" @mouseover="showAll = true" @mouseout="showAll = false"> 
    {{getWord}} 
</div> 

JS

export default { 
    data() { 
     return { 
      showAll: false, 
      word: {} 
     } 
    }, 
    computed: { 
     getWord: function() { 
      if (this.showAll) return this.word.english 

      let value = this.word.english; 
      let length = 50; 
      if (value.length <= length) { 
       return value; 
      } else { 
       return value.substring(0, length) + '...'; 
      } 
     } 
    } 
} 
+0

但是这个解决方案对我很有帮助,我忽略了提到它在v-for循环中。有什么办法可以防止所有div发生的行为,只适用于我所徘徊的那个? – lnamba

+0

@DavidL这绝对不是冗长的,是一个完全有效的解决方案。但是,我发现在实践中,能够看到组件模板中潜在的DOM更改非常有帮助。绝对是一个灰色地带。但在这种情况下,我认为能够看到模板中这四行代码中'showAll'变量的效果比不得不跳转到计算方法的定义以查看'showAll'变量是否相关以及它会影响什么。 – thanksd

+0

@ lnamba需要了解你是如何编码的。如果你无法弄清楚,请发表另一个问题。 – thanksd