Xây dựng ứng dụng Todo List đơn giản với VueJS và LocalStorage

Xin chào các bạn, sau đây mình xin hướng dẫn các bạn xây dựng một ứng dụng Todolist đơn giản với Vue JS.

Ở bài viết này sẽ không có thao tác với cơ sở dữ liệu chỉ đơn thuần là sử dụng Vue JS, để lưu lại các giá trị đã thêm mình sử dụng LocalStorage thay cho Database nhé :)

Khởi tạo Project

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todolist VueJS</title>
</head>
<body>
    <div id="app">
        input
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {}
            },
            methods: {}
        }).mount("#app");
    </script>
</body>
</html>

Thêm Task mới

Sử dụng hàm push của javascript để thêm phần tử vào mảng.

...
<input type="text" v-model="task" />
<button v-on:click="addTask()">Add</button>
...
addTask() {
  this.tasks.push({
     id: Date.now(),
     name: this.task,
  });
  this.task = "";
},
...

Hiển thị Task sau khi thêm

Sử dụng v-show để hiển thị thông tin nếu chưa có task nào được thêm vào, dùng v-for để in các task đã được thêm vào ra màn hình.

<p v-show="!tasks.length">Chưa có task nào được thêm.</p>
...
<ul>
  <li v-for="task in tasks">{{ task.name }}</li>
</ul>
  ...

Xóa một Task

Để xóa một phần từ khỏi mảng, sử dụng hàm filter để lấy các giá trị có ID khác với phần tử được chọn và cập nhật lại một mảng mới vào tasks.

<li v-for="task in tasks">
  {{ task.name }}
  <a href="#" v-on:click.prevent="removeTask(task)">Remove</a>
</li>
...
removeTask(task) {
  let newTasks = this.tasks.filter(function (item) {
     return task.id !== item.id;
  });
  this.tasks = newTasks;
  localStorage.setItem("tasks", JSON.stringify(this.tasks));
},
....

Sử dụng LocalStorage để lưu lại task

Mục đích của việc sử dụng LocalStorage để lưu lại task đã thêm sau khi Refresh trang hoặc tắt trình duyệt sẽ vẫn còn dữ liệu.

Trong 2 hàm AddTask và RemoveTask chúng ta thêm đoạn code dưới đây để ghi dữ liệu vào LocalStorage.

localStorage.setItem("tasks", JSON.stringify(this.tasks));

Lấy Task từ LocalStorage

Ở đây chúng ta sẽ sử dụng hàm getItem để lấy thông tin task từ localStorage đã lưu, nếu chúng chưa tồn tại thì cho nó một mảng rỗng. Bạn có thể sử dụng created() hoặc mounted() đều được.

...
created() {
  this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
},
...

Code hoàn thành cho bạn nào chưa làm được.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todolist VueJS</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="task" />
      <button v-on:click="addTask()">Add</button>
      <p v-show="!tasks.length">Chưa có task nào được thêm.</p>
      <ul>
        <li v-for="task in tasks">
          {{ task.name }}
          <a href="#" v-on:click.prevent="removeTask(task)">Remove</a>
        </li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            tasks: [],
            task: "",
          };
        },
        created() {
          this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
        },
        methods: {
          addTask() {
            this.tasks.push({
              id: Date.now(),
              name: this.task,
            });
            localStorage.setItem("tasks", JSON.stringify(this.tasks));
            this.task = "";
          },
          removeTask(task) {
            let newTasks = this.tasks.filter(function (item) {
              return task.id !== item.id;
            });
            this.tasks = newTasks;
            localStorage.setItem("tasks", JSON.stringify(this.tasks));
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>