laravel - 带有 vuex 的 boostrapVue 中的模态事件

问题描述

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

用户组件：

我发送一个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()`

但是如果我在主要组件中运行模式，它就可以工作！对这个菜鸟的一些帮助：3 P/d：我正在加载 laravel 的 app.js 中的组件

标签： laravelvue.jsvuejs2bootstrap-modalvuex

您可能想尝试为 b-modal 分配一个 ID，然后this.$bvModal.show('view-profile-modal')改用它。确保在 main.js 或 app.js 文件中正确导入它，使用：

import { ModalPlugin } from 'bootstrap-vue'

Vue.use(ModalPlugin)

laravel - 带有 vuex 的 boostrapVue 中的模态事件

问题描述

解决方案

推荐阅读