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

@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.

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

@otha_marks 

Существует несколько способов создания приложения "todo" на Vue.js, но вот один из возможных вариантов:

1. Создайте новый проект на Vue.js с помощью Vue CLI, используя команду:vue create my-todo-app
2. Установите дополнительные пакеты, необходимые для работы приложения:npm install --save axios moment axios будет использоваться для взаимодействия с внешним API, а moment для форматирования дат.
3. Создайте компонент TodoList, который будет отображать список задач. Внутри компонента создайте массив todos, в котором будут храниться задачи. Добавьте методы addTodo для добавления новой задачи, deleteTodo для удаления задачи и completeTodo для отметки задачи как выполненной.<template> <div> <h2>Todo List</h2> <input v-model="newTodo" type="text" placeholder="Add new todo"> <button @click="addTodo">Add</button> <ul> <li v-for="todo in todos" :key="todo.id" :class="{ 'completed': todo.completed }"> <span>{{ todo.title }}</span> <span class="date">{{ formatDate(todo.date) }}</span> <button @click="deleteTodo(todo.id)">Delete</button> <button @click="completeTodo(todo.id)">Complete</button> </li> </ul> </div> </template> <script> import axios from 'axios' import moment from 'moment' export default { data() { return { todos: [], newTodo: '' } }, mounted() { this.fetchTodos() }, methods: { fetchTodos() { axios.get('https://jsonplaceholder.typicode.com/todos') .then(response => { this.todos = response.data.slice(0, 10) }) .catch(error => { console.log(error) }) }, addTodo() { if (this.newTodo.trim() === '') { return } const newTodo = { id: this.todos.length + 1, title: this.newTodo, completed: false, date: new Date() } this.todos.push(newTodo) this.newTodo = '' }, deleteTodo(id) { const index = this.todos.findIndex(todo => todo.id === id) this.todos.splice(index, 1) }, completeTodo(id) { const todo = this.todos.find(todo => todo.id === id) todo.completed = true }, formatDate(date) { return moment(date).format('MMM Do YYYY') } } } </script> <style> .completed { text-decoration: line-through; } </style>
4. В mounted хуке компонента вызовите метод fetchTodos, который получит данные из внешнего API (в данном случае используется jsonplaceholder.typicode.com/todos).
5. Внутри fetchTodos обработайте полученные данные и добавьте их в массив todos.