@ufffff

Как понять код на vue js?

Я только начала изучение vue js, немного знаю про js. Хотелось бы полностью понять этот код. Особую проблему вызвала данная строчка:
toggleCompleted(task) {
    const index = this.tasks.findIndex(x => x.id === task.id)
    this.tasks[index].completed = !this.tasks[index].completed;
  }


Полный код:
<!DOCTYPE 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/vue@2.6.11/dist/vue.js"></script>
  <script>
  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;
  }
}
});


  </script>
  </body>
  </html>
  • Вопрос задан
  • 489 просмотров
Решения вопроса 4
E1ON
@E1ON
AAA
Метод находит индекс массива и изменяет его свойство completed на противоположное, по этому же индексу.
Ответ написан
@vbpiar
Код на vue, можно понять по оператору v-if. У vue есть отличная документация на официальном сайте, советую изучить. И изучить webpack
Ответ написан
@iordania
const index = this.tasks.findIndex(x => x.id === task.id)

при клике на вашу кнопку вы получаете id вашей таски из компонента и далее в строчке выше вы ищите сущность таски в массиве.
this.tasks[index].completed = !this.tasks[index].completed;

после того как нашли по id определённый таск, вы меняете его состояние на true или наоборот, в зависимости что было до этого
Ответ написан
@zogxray
Этот код ищет индекс объекта в массиве по id. Кстати, тем медленне, чем дальше этот id от начала массива.

Чтобы лучше понять попробуйте немного порефакторить. Напримeр в v-for можно сделать (index, item) in items и в toogle метод сразу передавать индекс, а не объект. Это избавит от строчки с findIndex.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы