How to understand code in vue js?

U

ufffff2020-05-22 23:15:58

JavaScript

ufffff, 2020-05-22 23:15:58

I just started learning vue js, I know a little about js. I would like to fully understand this code. This line caused a problem:

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

Full code:

<!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/[email protected]/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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

L

Loli E1ON, 2020-05-23
@ufffff

The method finds the array index and changes its completed property to the opposite, at the same index.