Vuejs2 VueJS：为什么v-model不能与VueJS筛选器一起工作

为什么

v-model

不能与

中的过滤器

getUppercase

一起使用

HTML

<template>
  <div class="wrapper">
    Check if fruit exist: <input v-model="filterText | getUppercase">
    <ul v-for="fruit in filteredFruits">
      <li> {{ fruit }} </li>
    </ul>
  </div>
</template>

vue.js中的两种过滤器替换方法请阅读以了解更多信息。很高兴知道

但是，据我所知，您希望在数组中实现搜索，或者查看下面的内容

<div id="app">
  Check if fruit exist: <input v-model="filterText">
    <ul v-for="fruit in filteredFruits">
      <li> {{ fruit }} </li>
    </ul>
</div>

new Vue({
  el: "#app",
  data: {
    filterText: "",
     fruits: ["Apple", "Banana", "Orange", "PineApple", 'Pina Colada']
  },
    computed: {
    filteredFruits() {
        return this.fruits.filter(item => item.toLowerCase().match(this.filterText.toLowerCase()))
    }
  }
})

检查是否有水果：

{{水果}

新Vue({
el:“应用程序”，
数据：{
筛选文本：“”，
水果：[“苹果”、“香蕉”、“橙子”、“菠萝”、“菠萝”和“菠萝”]
},
计算：{
过滤水果（）{
返回this.fruits.filter（item=>item.toLowerCase（）.match（this.filterText.toLowerCase（））
}
}
})

我可以看到您正在尝试做什么，但是，由于使用v-model时有双向绑定，因此在显示时最好只应用

getUppercase

过滤器

您的模板如下所示：

<template>
 <div class="wrapper">
   Check if fruit exist: <input v-model="filterText">
   <ul v-for="fruit in filteredFruits">
     <li> {{ fruit | getUppercase}} </li>
   </ul>
 </div>
</template>

现在在模板中使用此指令，如：

<input v-model="filterText" v-get-uppercase="filterText">

---

它将执行与定义“不工作”相同的操作。感谢您的回答，我知道如何使用过滤器，例如

{sometext | getUppercase}

这将起作用，因为管道左侧的文本将传递到过滤器方法（右侧）但我更感兴趣的是知道为什么过滤器在这句话中不起作用。我回答了你的问题。因为你在v型中使用过滤器，这被称为双向过滤器。双向过滤器被替换。请仔细看看我的答案。

Vue.directive('getUppercase', {
  twoWay: true, // this transformation applies back to the filterText
  bind: function () {
    var self = this;
    self.handler = function () {
     self.set(self.el.value.toUpperCase());
    }
    self.el.addEventListener('input', self.handler);
  },
  unbind: function () {
   this.el.removeEventListener('input', this.handler);
  }
 });

<input v-model="filterText" v-get-uppercase="filterText">