具有vuex的boostrapVue中的模式事件

Question

我有一个包含模态组件的组件：

UserComponent：

我发送ID：

    `<a href="#"  class="text-primary" data-toggle="modal" >
           <i @click.prevent="item(tag.id)"class="fa fa-fw fa-eye fa-2x"></i>
     </a>`

您收到的功能：

    `item: function(id){this.$store.dispatch('getViewProfile', id);},`

我的vuex模块：

        `export default {
            state: {
                    item:[],
             },
        mutations: {
         LOAD_PROFILE(state, data){
                    state.itemProfile = data;
                },
        }
        actions:{

     getViewProfile: function(context, id){
                let that = this;
                let url = '/user/'+id;
                axios.get(url).then(response => {
                    context.commit('LOAD_PROFILE', {
                        'user': response.data,
                    });
                }).catch(function (response) {
                    console.log(response)
                });
    }`

我在模态组件中使用bootstrapVue库：

    `<b-modal ref="view-profile-modal" hide-footer title="Using Component Methods">
        Hello World
    </b-modal>`

功能：

    `computed:{
     user: function () {
                   if(typeof this.$store.state.users.itemProfile.user !== 'undefined') {
                       return this.$store.state.users.itemProfile.user;
                   }
               },
    }`

我收到的信息很好，我无法获得的是模态已执行，因为它告诉我无法找到show（）

     `this.$refs['view-profile-modal'].show()`

但是如果我在主要组件中运行模态，它将起作用！这个菜鸟的一些帮助：3P / d：我正在laravel的app.js中加载组件]

我有一个包含模态组件的组件：UserComponent：我发送了一个id：`[

Answer 1

您可能要尝试为b模式分配ID，然后改用this.$bvModal.show('view-profile-modal')。确保使用以下命令将其正确导入main.js或app.js文件中：

import { ModalPlugin } from 'bootstrap-vue'