Прошло несколько дней с тех пор, как я изучал vue.js, я хотел создать функцию, которая показывает тост из официальных документов bootstrap-vue: https://bootstrap-vue.org/docs/components/toast#toasts-on-demand , Мне удалось создать тост с помощью инъекции экземпляра компонента и из пользовательского компонента, однако я хочу создать еще один пользовательский тост с помощью независимой функции / файла javascript так что я могу назвать это динамически.
Вот код Cart.vue, который я использовал для инъекции:
<script>
export default {
methods: {
purchaseHandler() {
this.$bvToast.toast('The item added to your cart', {
title: 'Notification',
variant: 'succes',
solid: true
})
},
},
};
</script>
Однако я создал custom-toast.js как независимую функцию / файл js и импортировал плагин, как указано в документации:
import Vue from 'vue'
import { ToastPlugin } from 'bootstrap-vue'
Vue.use(ToastPlugin)
export default () => {
this.$bvToast.toast('Toast body content', {
title: 'Toast test',
variant: 'succes',
solid: true
})
}
И я импортировал custom-toast.js в свой файл Cart.vue, теперь он выглядит так:
<script>
import customToast from "./custom-toast";
export default {
methods: {
purchaseHandler() {
customToast()
},
};
</script>
А теперь ОШИБКА:
[Vue warn]: ошибка в обработчике v-on: TypeError: невозможно прочитать свойство $ bvToast из undefined
TypeError: невозможно прочитать свойство $ bvToast из undefined
Я знаю, что это супер базовый материал, он думал, что смогу решить эту проблему, найдя эквивалент инъекции this. $ BvToast в независимом файле js, но я не смог найти ничего, так как я знал Vue js все еще мал, реальный вопрос
- Что эквивалентно this. $ BvToast или любой инъекции bootstrap-vue в независимый файл js?
- Как мне решить эту проблему?
Спасибо. Извините за плохой английский
