时间戳

首页 > 解决方案 > 在 Vue 之外使用 Buefy 组件

javascript - 在 Vue 之外使用 Buefy 组件

问题描述

如何在 Vue 组件之外创建Buefy 通知？例如，我定义了以下 axios 拦截器，并尝试使用 Buefy 通知：

import axios from "axios";
import { Notification } from "buefy/dist/components/notification";

axios.interceptors.response.use(
  response => {
    if (response.data.flash) {
      Notification.open(response.data.flash);
    }
    return response;
  },
  error => {
    if (error.response) {
      Notification.open(error.response.data.flash);
      return Promise.reject(error.response);
    }
  }
);

export default axios;

这导致控制台中出现此错误：

[Vue 警告]：v-on 处理程序中的错误（Promise/async）：“TypeError：无法读取未定义的属性 'open'”

我究竟做错了什么？

标签： javascriptvue.jsbuefy

解决方案

好的，发布后不久就找到了答案。把问题和答案放在一起，以防万一其他人遇到问题。显然，import { Notification } from "buefy/dist/components/notification"这是一种旧的导入方式，而应该像这样导入：

import { NotificationProgrammatic as Notification } from "buefy";

推荐阅读