0

我在我的项目中使用了 buefy 并且它有效，但是在将 buefy 从 v0.7.10 更新到 v0.8.8 之后，在我进行重大更改时出现了一些错误。

我要解决的错误是我b-notification以编程方式打开的用法。

一步一步，这是我的用法：

  • Messages.js（是我使用 b-notification 的文件）
export const messages = {
  methods: {
    errorCustomMessage (error) {
      return error && error.response
        ? (error.response.data.abandoned_folder || error.response.data.expectedpieces || error.response.data.can_be_inadmissible)
        : ''
    },
    showMessage (message, type) {
      const duration = message.length > 100 ? 7000 : 5000
      this.$buefy.notification.open({
        type,
        message,
        duration,
        queue: false,
        hasIcon: true,
        closable: true,
        position: 'is-top'
      })
    },
    showErrorMessage (message, error) {
      this.showMessage(this.errorCustomMessage(error) || message, 'is-danger')
    },
    showSuccessMessage (message) {
      this.showMessage(message, 'is-success')
    },
    showInfoMessage (message) {
      this.showMessage(message, 'is-info')
    },
    showWarningMessage (message) {
      this.showMessage(message, 'is-warning')
    }
  }
}
  • Globals.js
import Vue from 'vue'
import Icon from '@/assets/icons/Icon'
import { messages } from '@/mixins/messages'

Vue.component('icon', Icon)
Vue.mixin(messages)
  • Plugins.js（是我导入/初始化 vue 和 buefy globaly 的地方）
import Buefy from 'buefy'
import Vue from 'vue'
Vue.use(Buefy, {
  defaultDayNames: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
  defaultMonthNames: FRENCH_MONTHS,
  defaultFirstDayOfWeek: 1,
  defaultDateFormatter: date => date.toLocaleDateString('fr-Fr'),
  defaultIconPack: 'fas'
})
  • Main.js（最后是所有设置文件的加载位置）
import Vue from 'vue'

import '@/globals'
import '@/plugins'
import store from '@/store'
import router from '@/router'
import App from '@/App.vue'
import '@/filters'
import '@/axiosConfig'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  • Upload.vue（是我使用 Messages.js 函数的文件）
<template>
  <b-upload
    @input="handleNewTemplateUpload(props.row.id, $event)"
  >
    <a class="button is-primary">
      <span class="icon">
        <i class="fas fa-upload"></i>
      </span>
      <span>Nouvelle version</span>
    </a>
  </b-upload>
</template>

<script>
  import TemplateEdition from '../api/templateedition'

  export default {
    name: 'EditionTemplateList',
    data () {
      return {
        templates: []
      }
    },
    created () {
      TemplateEdition.list().then(response => {
        this.templates = response.data
      })
    },
    methods: {
      handleNewTemplateUpload (templateId, file) {
        let formData = new FormData()
        formData.append('template_custom', file)

        TemplateEdition.uploadNewTemplate(templateId, formData)
          .then(response => {
            let indexObj = this.templates.findIndex(
              obj => obj.id === templateId)
            this.$set(this.templates, indexObj, response.data)

            this.showSuccessMessage('Nouvelle version du document téléversée.')
          })
          .catch(error => {
            const response = error.response

            const messageDefault = 'Le téléversement a échoué.'
            let message = (response.status === 400 && response.data.template_custom) ? response.data.template_custom[0] : messageDefault

            this.showErrorMessage(message)
          })
      }
    }
  }
</script>

好吧，我的问题是我使用了该函数this.showErrorMessage(message)（在 Messages.js 文件中初始化）并且它不起作用。

这给了我错误信息：Unknown custom element: <b-notification> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

坦克你帮助我。

4

0 回答 0