VueJS: почему v-модель не работает с фильтром vuejs - PullRequest
Новая
       12

VueJS: почему v-модель не работает с фильтром vuejs

0 голосов
/ 13 мая 2018

Почему 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();
    }
  }
};

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Я вижу, что вы пытаетесь сделать, однако из-за двухстороннего связывания при использовании v-модели лучше будет просто применить фильтр 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">

0 голосов
/ 13 мая 2018

Два способа замены фильтров в 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()))
    }
  }
})
...