在 laravel + vuejs 中使用 Modal 查看用户信息

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
},
}

}

这是用户.vue

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

这是索引.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来切换模态：

用户.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>

显示用户

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

或者你可以通过Javascript切换模态

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