解决 'vant__WEBPACK_IMPORTED_MODULE_3__.Toast.fail is not a function' 错误 - Vue.js Vant 组件库 - 常规

解决 'vant__WEBPACK_IMPORTED_MODULE_3__.Toast.fail is not a function' 错误 - Vue.js Vant 组件库

报错信息 'vant__WEBPACK_IMPORTED_MODULE_3__.Toast.fail is not a function' 通常意味着 Vant 的 Toast 组件没有正确引入或使用。

原始代码:

fetchTaskList() {
  const token = localStorage.getItem('token');
  alert(token)
  axios.interceptors.request.use(
      config => {
        config.headers.Authorization = `Bearer ${token}`;
        return config;
      },
      error => Promise.reject(error)
  );
  axios.post('http://localhost:8888/task/findAllTask', {token},{ mode: 'cors' })
      .then(response => {
        this.taskList = response.data;
        this.nextId = response.data.length;
      })
      .catch(error => {
        console.log(error);
      });
},

解决方案:

引入 Vant 组件库: 在代码开头引入 Vant 组件库:

import { Toast } from 'vant';

正确使用 Toast 组件: 将 Toast.fail 修改为 Toast.fail()，即正确调用 Toast 组件的 fail 方法:

.catch(error => {
  console.log(error);
  Toast.fail('请求失败，请稍后再试');
});

修改后的代码:

fetchTaskList() {
  const token = localStorage.getItem('token');
  alert(token)
  axios.interceptors.request.use(
      config => {
        config.headers.Authorization = `Bearer ${token}`;
        return config;
      },
      error => Promise.reject(error)
  );
  axios.post('http://localhost:8888/task/findAllTask', {token},{ mode: 'cors' })
      .then(response => {
        this.taskList = response.data;
        this.nextId = response.data.length;
      })
      .catch(error => {
        console.log(error);
        Toast.fail('请求失败，请稍后再试');
      });
},

注意: 确保已经按照 Vant 官方文档的指引正确安装和配置了 Vant 组件库。