Question

我在项目中使用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和全局buyy的地方）

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.

感谢您对我的帮助。

未知的自定义元素：<b-notification>

0 个答案: