有人可以帮我弄这个吗?我是vuejs的新手,并且在vuejs中使用modal时遇到了问题 . 我的问题是单击按钮show user,模式没有弹出 .
这是我的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">×</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
}
]
})
1 回答
您可能希望使用
data-target
来切换模态:User.vue
ShowUser
或者你可以toggle modal by Javascript