Question

为什么v-model不适用于getUppercase

中的过滤器<input v-model="filterText | 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>

VueJS

export default {
  name: "filterText",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      filterText: "",
      fruits: ["Apple", "Banana", "Orange", "PineApple", 'Pina Colada']
    };
  },
  computed: {
    filteredFruits: function() {
      var vm = this;
      return vm.fruits.filter(function(item) {
        return item.match(vm.filterText)
      });
    }
  },
  filters: {
    getUppercase: function(obj) {
      return this.obj.toUpperCase();
    }
  }
};

Answer 1

我可以看到你要做的事情，但是，由于使用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>

但是，如果您仍希望转换filterText模型值，则可以使用指令。在这种情况下，您的VueJS代码将类似于：

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

它将与<input v-model="filterText | getUppercase">

做同样的事情

VueJS：为什么v-model不能与vuejs过滤器一起使用

1 个答案: