Bối cảnh lỗi

Khi sử dụng Vant được tải về thông qua CDN, một số bạn có thể gặp lỗi như sau khi gọi Toast:

1

Toast is not defined

Đây là tình huống thường xuyên xảy ra đối với người mới bắt đầu làm quen với thư viện này. Bài viết này sẽ giúp bạn tìm hiểu nguyên nhân và cách khắc phục lỗi trên một cách nhanh chóng.

Giả sử bạn đang phát triển một ứng dụng VueJS và muốn sử dụng thành phần Toast của Vant để hiển thị các thông báo nhỏ cho người dùng. Bạn đã thêm CDN của Vant vào trang HTML như sau:

1

<script src="

Sau đó, trong file script của component, bạn cố gắng gọi hàm Toast.success() trực tiếp như thế này:

1

Toast.success('Chốt đơn thành công');

Tuy nhiên, trình duyệt lại báo lỗi:

1

Uncaught ReferenceError: Toast is not defined

Nguyên nhân lỗi

Lỗi này xảy ra vì khi bạn tải Vant qua CDN, toàn bộ thư viện sẽ được gắn vào biến vant. Điều đó có nghĩa là các phương thức như Toast, Dialog, hay Popup không phải là biến toàn cục, mà nằm bên trong đối tượng vant.

Do đó, việc gọi Toast.success(...) là sai, bởi Toast chưa từng được khai báo ở cấp độ toàn cục.

Cách sửa đúng

Bạn cần thay đổi cách gọi hàm như sau:

1

vant.Toast.success('Chốt đơn thành công');

Với cú pháp này, bạn đang truy cập tới thuộc tính Toast trong đối tượng vant, từ đó mới gọi phương thức success.

Một ví dụ cụ thể

Dưới đây là đoạn mã hoàn chỉnh minh họa cách sử dụng Toast đúng khi sử dụng CDN:

 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


<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <title>VD Sử Dụng Vant qua CDN</title>
  <link rel="stylesheet" href="
</head>
<body>
  <div id="app">
    <button @click="showToast">Hiển thị thông báo</button>
  </div>

  <!-- Tải Vue -->
  <script src="
  <!-- Tải Vant -->
  <script src="
  
  <script>
    new Vue({
      el: '#app',
      methods: {
        showToast() {
          vant.Toast.success('Thành công!');
        }
      }
    });
  </script>
</body>
</html>

Trong đoạn code trên, khi người dùng nhấn vào nút, sẽ hiện lên một thông báo “Thành công!” nhờ hàm vant.Toast.success() hoạt động chính xác.

Kết luận

Lỗi Toast is not defined là do bạn chưa truy cập đúng đường dẫn đến phương thức trong thư viện Vant khi sử dụng CDN. Việc nhớ rằng tất cả các thành phần của Vant đều nằm trong namespace vant sẽ giúp bạn tránh những lỗi tương tự trong quá trình phát triển.

Hy vọng bài viết này hữu ích với bạn! Nếu bạn còn bất kỳ câu hỏi nào liên quan đến việc tích hợp Vant hoặc các vấn đề khác trong VueJS, đừng ngần ngại chia sẻ nhé!