Question

有人可以帮我吗？我是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">&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 Component的脚本

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

或者你可以toggle modal by Javascript

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

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

1 个答案: