Javascript 模式窗口未激活

我使用以下示例创建一个模态窗口：

在模式中，我从表中发送数据。 我的代码：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
        <div id="my-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Item Clicked!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Text:{{text}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
  <!--end modal -->


    <table class="table table-condensed">
        <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in tasks">

            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">
                {{row.text}}
                <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
            </td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>

        </tr>
        </tbody>
    </table>
</div>

但由于某些原因，模态窗口未处于活动状态：

如何修复它？由于某些原因，该窗口未处于活动状态。 脚本文本her，模态的唯一部分：

Script:
<script type="text/javascript">
    //send post and open menu
    new Vue({
        el: '#app6',
        data:{
            tasks:[],
            fields:[
                'id','text','date',
            ],
            text:'',
            id:'',
            active: true,              
        },
        methods: {

            itemClicked: function(item) {
                this.id = item.id;
                this.text = item.text;
              //  console.log(item.id);
                $("#my-modal").modal('show');
            }
               //open edit windows
        }
    })

---

文本雾得到最小限制。

在本例中，他们使用引导/jQuery的组合。这就是你应该用的 你的代码可以工作，而不是Bulma。同样，最简单的方法是只使用CDN。因此，你需要在你的头脑中或在你的主应用程序分区之前的某个地方包含这些行

项目点击！ &时代； 文本：{{Text} 保存更改 关 身份证件 任务 日期 {{row.id}} {{row.text} 从git编辑 {{row.date_current}

---

请提供脚本以查看更新。是否有错误？控制台中没有错误。上面给出的模式代码与您的站点中的不同

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">