在鼠标悬停时删除 Vue 自定义过滤器答案

【问题标题】：Removing a Vue custom filter on mouseover在鼠标悬停时删除 Vue 自定义过滤器
【发布时间】：2017-07-19 16:48:23
【问题描述】：

我想使用 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) + '...';
      }
    }
 },

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

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

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

和：

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

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

【问题讨论】：

鼠标悬停时有什么反应吗？可以包含showAll 的代码吗？

标签： javascript events event-handling vue.js vuejs2

【解决方案1】：

将showAll 设为布尔数据属性并使用template 标记通过v-if 和v-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.

【讨论】：

【解决方案2】：

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

HTML

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

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

【讨论】：

这个解决方案对我有用，但是我没有提到它在 v-for 循环中。有什么方法可以防止所有 div 发生该操作，并且只应用于我悬停的那个？
@DavidL 这绝对不那么冗长，是一个完全有效的解决方案。但是，我发现，在实践中，能够在组件的模板中看到潜在的 DOM 变化是非常有帮助的。绝对是灰色地带。但在这种情况下，我认为能够在模板的这四行中看到 showAll 变量的效果比必须跳转到计算方法的定义以查看 showAll 变量是否相关和它会影响什么。
@lnamba 需要看看你是如何编码的。如果您无法弄清楚，请发布另一个问题。
@thanksd 这当然是个人喜好问题。我总是倾向于调试 JS 而不是手动检查模板，我总是会选择一个使用较少观察者的解决方案（如果合理的话），尽管两者都是绝对有效的方法:)
@DavidL 是的，完全偏爱。我可能会在一个月内改变主意：P

【解决方案3】：

这应该可行。

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

【讨论】：