Модальное событие в boostrapue с vuex - PullRequest
Новая
       58

Модальное событие в boostrapue с vuex

0 голосов
/ 04 ноября 2019

У меня есть компонент, который содержит модальный компонент:

UserComponent:

Я отправляю идентификатор: 

    `<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: Я загружаю компоненты в app.js из laravel

1 Ответ

1 голос
/ 08 ноября 2019

Возможно, вы захотите попытаться присвоить идентификатор b-модалу и затем использовать this.$bvModal.show('view-profile-modal'). Убедитесь, что вы правильно импортировали его в файл main.js или app.js, используя:

import { ModalPlugin } from 'bootstrap-vue'

Vue.use(ModalPlugin)

...