Как я могу отфильтровать объект с помощью VueJS?

Question

Недавно я практиковал Vue. js. Прямо сейчас я составляю простой список дел. Не работают некоторые кнопки, которые фильтруют задачи. Кнопка Все для перечисления всех задач. Текущая кнопка предназначена для снятия флажка ввода квадрата. кнопка done предназначена для отмеченных.

Кто-нибудь знает, как исправить?

new Vue({
  el: '#app',
  data: {
    inputTask:'',
    todos: [
      {task:'task01', done: false},
      {task:'task02', done: false},
      {task:'task03', done: true},
      {task:'task04', done: true},
      {task:'task05', done: false},
    ]
  },
  computed: {


  },
  methods: {
    allTask : function () {
      this.todos
    },
    ongoingTask: function () {
      this.todos = this.todos.filter(function (el) {
        el.value = false
      })
    },
    doneTask: function () {
      this.todos = this.todos.filter(function (el) {
        el.checked
      })
    },
    addTask: function() {
      const todo = { task: this.inputTask, done:false, };
      this.todos.push(todo);
      this.inputTask ='';
    },
    deleteTask: function (index) {
      this.todos.splice(index, 1);
    }


  }

})

.done {text-decoration: line-through;}

<div id="app">
<input type="text" v-model="inputTask">
<button @click="addTask">Add</button>

<div>
<button @click="allTask">All</button>
<button @click="ongoingTask">Ongoing</button>
<button @click="doneTask">Done</button>
</div>

<ul>
  <li v-for="(todo, index) in todos" :key="todo">
    <input type="checkbox" v-model="todo.done">
    <span :class="{done:todo.done}">{{todo.task}}</span>
    <button @click="deleteTask(index)">Remove</button>
  </li>
</ul>
<p v-show="todos.length===0">Nothing to do</p>


</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

Вы должны использовать вычисляемое свойство для фильтрации вашей задачи. И я думаю, вы можете добавить некоторые улучшения для удобного интерфейса. Итак, ваш код будет выглядеть так:

new Vue({
    el: '#app',
    data: {
        type: '',
        inputTask:'',
        todos: [
            {task:'task01', done: false},
            {task:'task02', done: false},
            {task:'task03', done: true},
            {task:'task04', done: true},
            {task:'task05', done: false},
        ]
    },
    methods: {
        setFilterType(type) {
            this.type = type;
        },
        addTask() {
            const todo = { task: this.inputTask, done: false};
            this.todos.push(todo);
            this.inputTask = '';
        },
        deleteTask(index) {
            this.todos.splice(index, 1);
        }
    },
    computed: {
        filteredTodos() {
            return this.todos.filter(todo => {
                switch(this.type) {
                    case 'ongoing':
                        return !todo.done;
                    case 'done':
                        return todo.done;
                    default:
                        return true;
                }
            });
        }
    }
})

И шаблон:

<div id="app">
<input type="text" v-model="inputTask">
<button @click="addTask">Add</button>

<div>
<button :class="{active: type ===''}" @click="setFilterType('')">All</button>
<button :class="{active: type ==='ongoing'}" @click="setFilterType('ongoing')">Ongoing</button>
<button :class="{active: type ==='done'}" @click="setFilterType('done')">Done</button>
</div>

<ul>
  <li v-for="(todo, index) in filteredTodos" :key="todo">
    <input type="checkbox" v-model="todo.done">
    <span :class="{done:todo.done}">{{todo.task}}</span>
    <button @click="deleteTask(index)">Remove</button>
  </li>
</ul>
<p v-show="todos.length===0">Nothing to do</p>


</div>

Также я добавил active класс к кнопке. Таким образом, вы можете выделить через css текущую сортировку. Подробнее о вычислениях вы можете прочитать здесь

Answer 2

Все ваши функции фильтрации на ongoingTask и doneTask неверны, они должны возвращать значение; Посмотрите, как работает функция фильтра: здесь .

Я не уверен, каково предполагаемое поведение continueTaks, но я предполагаю, что следующее должно решить проблему. Пожалуйста, дайте мне знать, и я соответствующим образом обновлю ответ.

// ...
    ongoingTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.value === false
      })
    },
    doneTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.checked
      })
    },
// ...

---

EDIT:

Другая часть проблемы была связана с logi c, поскольку как только вы нажмете любую кнопку, которая запускает фильтрацию, данные в состоянии удаляются (например, если я нахожусь в представлении по умолчанию, просматриваю все задачи, когда я нажимаю кнопку «Продолжить», все выполненные TODO в списке удаляется и навсегда теряется!); в идеале вы должны сохранить эти данные и использовать вычисленные свойства для решения проблемы, вот вам рабочий пример (здесь я использую компонент Vue только для того, чтобы собрать все данные в одном месте):

<template>
  <div id="app">
    <input type="text" v-model="inputTask">
    <button @click="addTask">Add</button>

    <div>
      <button @click="changeFilter('all')">All</button>
      <button @click="changeFilter('ongoing')">Ongoing</button>
      <button @click="changeFilter('done')">Done</button>
    </div>

    <ul>
      <li v-for="(todo, index) in getTasksList()" :key="{index}">
        <input type="checkbox" v-model="todo.done">
        <span :class="{done:todo.done}">{{todo.task}}</span>
        <button @click="deleteTask(index)">Remove</button>
      </li>
    </ul>
    <p v-show="todos.length===0">Nothing to do</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    inputTask: "",
    currentFilter: "ongoing",
    todos: [
      { task: "task01", done: false },
      { task: "task02", done: false },
      { task: "task03", done: true },
      { task: "task04", done: true },
      { task: "task05", done: false }
    ]
  }),
  computed: {
    ongoingTasks: function() {
      return this.todos.filter(function(todo) {
        return todo.done === false;
      });
    },
    doneTasks: function() {
      return this.todos.filter(function(el) {
        return el.done;
      });
    }
  },
  methods: {
    changeFilter(newFilter) {
      this.currentFilter = newFilter;
    },
    addTask: function() {
      const todo = { task: this.inputTask, done: false };
      this.todos.push(todo);
      this.inputTask = "";
    },
    deleteTask: function(index) {
      this.todos.splice(index, 1);
    },
    getTasksList() {
      switch (this.currentFilter) {
        case "ongoing":
          return this.ongoingTasks;
        case "done":
          return this.doneTasks;
        case "all":
        default:
          return this.todos;
      }
    }
  }
};
</script>

Надеюсь, это поможет!