vue-js. Добавление элемента списка в другой список по нажатию на кнопку

Question

Только начала изучение js-фреймворка vue. Не могу кое-что реализовать. Есть список со всеми заданиями, есть списки с не сделанными заданиями и заданиями выполненными (скриншот). У списка со всеми заданиями есть кнопки, на нажатие определённой кнопки задание должно добавляться в список complete tasks или incomplete tasks в зависимости от того, какая кнопка была нажата (не смотрите на грамматически неверное название кнопок, я потом исправлю). Реализовать это нужно, используя вычисляемые методы (computed) или собственные методы. Помогите, пожалуйста! Буду очень благодарна. Вот код:

<html>
<head>
<title></title>

</head>
<body>
<div id="root">
<h2>All Tasks</h2>
<ul>
<li v-for="task in tasks">
{{ task.description }}
<button @click = 'addInIncompleted'>Incompleted</button>
<button @click = 'addInCompleted'>Completed</button>
</li>
</ul>
<h2>Incomlete Tasks</h2>
<ul>
<li v-for = 'task in incompleteTasks' v-text = 'task.description'></li>
</ul>

<h2>Сomlete Tasks</h2>
<ul>
<li v-for = 'task in completeTasks' v-text = 'task.description'></li>
</ul>
</div>
<script src ="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
tasks: [
{description: 'Go to the school', completed: true},
{description: 'Go to the store', completed: false},
{description: 'Go to the walking', completed: true},
{description: 'Go to the gym', completed: false},
{description: 'Go to the park', completed: true},
{description: 'Go to the room', completed: false}
]
},

computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completeTasks() {
return this.tasks.filter(task => task.completed);
}
}
});

</script>
</body>
</html>

Answer 1

Вам, вероятно, нужно каждой записи в массиве присвоить идентификатор и тогда можно по этому идентификатору менять значение свойства completed, используя допустим такой метод:

toggleCompleted(task) {
 const index = this.tasks.findIndex(x => x.id === task.id)
 this.tasks[index].completed = !this.tasks[index].completed;
}

Вот наглядный пример:

var app = new Vue({
  el: "#root",
  data: {
    tasks: [{
        id: 1,
        description: 'Go to the school',
        completed: true
      },
      {
        id: 2,
        description: 'Go to the store',
        completed: false
      },
      {
        id: 3,
        description: 'Go to the walking',
        completed: true
      },
      {
        id: 4,
        description: 'Go to the gym',
        completed: false
      },
      {
        id: 5,
        description: 'Go to the park',
        completed: true
      },
      {
        id: 6,
        description: 'Go to the room',
        completed: false
      }
    ]
  },

  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
    completeTasks() {
      return this.tasks.filter(task => task.completed);
    }
  },
  methods: {
    toggleCompleted(task) {
      const index = this.tasks.findIndex(x => x.id === task.id)
      this.tasks[index].completed = !this.tasks[index].completed;
    }
  }
});

<html>

<head>
  <title></title>
</head>

<body>
  <div id="root">
    <h2>All Tasks</h2>
    <ul>
      <li v-for="task in tasks">
        {{ task.description }}
        <button @click="toggleCompleted(task)">
        <span  v-if="task.completed">Incompleted</span>
        <span v-else>Completed</span>
        </button>
      </li>
    </ul>
    <h2>Incomlete Tasks</h2>
    <ul>
      <li v-for='task in incompleteTasks' v-text='task.description'></li>
    </ul>

    <h2>Сomlete Tasks</h2>
    <ul>
      <li v-for='task in completeTasks' v-text='task.description'></li>
    </ul>
  </div>
  <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
</body>

</html>

БЛОГ НА HUSL

vue-js. Добавление элемента списка в другой список по нажатию на кнопку

Ответы (1 шт):