Как сделать todo на Vue.js?

Пользователь

otha_marks

от otha_marks, в категории: JavaScript , год назад

Как сделать todo на Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от lilla.herman , год назад

@otha_marks На самом деле для самого простого TODO достаточно всего пару компонентов,


Создаем сначала компонент прорисовки каждого TODO где мы принимаем props сам todo:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<template>
  <div class="ToDoItem">
    <p class="ToDoItem-Text">{{ todo.text }}</p>
    <div class="ToDoItem-Delete" @click="deleteItem(todo)">-</div>
  </div>
</template>

<script>
export default {
  name: "ToDoItem",
  props: ["todo"],
  methods: {
    deleteItem(todo) {
      this.$emit("delete", todo);
    },
  },
};
</script>


Второй этап это основной компонент:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <div id="app">
    <div class="ToDo">
      <h1 class="ToDo-Header">Простой To Do</h1>
      <div class="ToDo-Container">
        <div class="ToDo-Content">
          <ToDoItem
            v-for="todo in list"
            :key="todo.id"
            :todo="todo"
            @delete="onDeleteItem"
          />
        </div>
        <input v-model="todo" type="text" @keyup.enter="createNewToDoItem" />
        <div class="ToDo-Add" @click="createNewToDoItem()">+</div>
      </div>
    </div>
  </div>
</template>

<script>
import ToDoItem from "./TodoItem";
export default {
  name: "ToDo",
  components: {
    ToDoItem,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          text: "Первый Todo",
        },
        {
          id: 2,
          text: "Второй Todo",
        },
      ],
      todo: "",
    };
  },
  methods: {
    createNewToDoItem() {
      if (!this.todo) {
        alert("Введите Todo!");
        return;
      }
      const newId =
        Math.max.apply(
          null,
          this.list.map((t) => t.id)
        ) + 1;
      this.list.push({ id: newId, text: this.todo });
      this.todo = "";
    },
    onDeleteItem(todo) {
      this.list = this.list.filter((item) => item !== todo);
    },
  },
};
</script>


В данном примере если Вы перезагрузите страницу Вы увидите что все Вашу TODO исчезли. В реальном проекте конечно Вам нужно еще backend часть, которую Вы будете вызывать и делать валидацию, если нужно, и сохранять в базе данных или где то Ваши Todo.


Здесь конечно возможно понадобятся еще стили, чтобы сделать это более красивым, но как каркас можно легко использовать данный пример.