Просмотреть информацию о пользователе, используя модал в laravel + vuejs

Question

Может кто-нибудь помочь мне с этим?Я новичок в vuejs и у меня проблемы с использованием модальных в vuejs.Моя проблема заключается в нажатии кнопки показать пользователя, модал не выкатывается.

Вот мой компонент ShowUser vue

<template>

    <div class="modal fade" v-bind:class="{ 'is-active':modalState }">
            <div class="modal-dialog" role="document">
                    <div class="modal-content">
                            <div class="modal-header">
                                    <h5 class="modal-title">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                    </button>
                            </div>
                            <div class="modal-body">
                                    ...
                            </div>
                            <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                    </div>
            </div>
    </div>

Это скрипт из компонента ShowUser Vue

<script>

export default {
    name: "ShowUser",
    props: ['id'],
    data(){
        return {
            modalState: false
        }
    },

    created() {
        axios.get('/api/user/' + this.id).then(response => {
            console.log(response)
        })
    },
    methods: {
        handleActionButton() {
            this.modalState = true
        },
    }


}

Это Users.vue

<template slot="actions" slot-scope="props">
   <button class="btn btn-info btn-sm fa fa-eye" @click="handleActionButton"></button>
   <ShowUser></ShowUser>
</template>

Это маршрутизатор index.js

import ShowUser from '../views/setup/users/ShowUser'

export default new Router ({
routes : [
  {
    path: 'users/:id',
    name: 'ShowUser',
    component: ShowUser,
    props: true   
 }
]
})

Answer 1

Возможно, вы захотите использовать data-target для переключения модального режима:

User.vue

<button type="button" class="btn btn-info btn-sm fa fa-eye" 
        data-toggle="modal" 
        data-target="#myModal"
        @click="handleActionButton">
  Launch demo modal
</button>

ShowUser

<template>

    <div class="modal fade" 
         v-bind:class="{ 'is-active':modalState }" 
         id="myModal">
    </div>

</template>

Или вы можете переключить модал с помощью Javascript

handleActionButton() {
  $('#myModal').modal('show')
  this.modalState = true
}