[Vuejs]-How to use the computed to filter the `ul` in Vue by the input?

by

0👍

✅

Define a computed to do the filtering you want done.
Use the computed instead of todos in your v-for.

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [{
      text: 'Add some todos'
    }]
  },
  computed: {
    filteredTodos: function() {
      const re = new RegExp(this.newTodo, 'i');
      return this.todos.filter((item) => re.test(item.text));
    }
  },
  methods: {
    addTodo: function() {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({
          text: text
        })
        this.newTodo = ''
      }
    },
    removeTodo: function(index) {
      this.todos.splice(index, 1)
    }
  }
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in filteredTodos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

Leave a comment