Vue @click 事件不适用于显示模态

Question

我正在创建一个 Laravel SPA，我使用 Vue.js 作为前端。我遇到了这个错误，我不知道如何解决这个问题，因为我认为我的代码没有任何问题。@click除了editModal表格的编辑按钮中的功能外，我的组件中的所有功能都可以使用。有人能帮我吗？

用户.vue

<button class="btn btn-success" @click="newModal"  data-toggle="modal" data-target="#addNew">

 <table class="table table-hover">

          <tbody>

            <tr>

              <th>ID</th>

              <th>Name</th>

              <th>Email</th>

              <th>Type</th>

              <th>Registered</th>

              <th>Modify</th>

            </tr>

            <tr v-for="user in users" :key="user.id">

              <td>{{user.id}}</td>

              <td>{{user.name}}</td>

              <td>{{user.email}}</td>

              <td>{{user.type| upText}}</td>

              <td>{{user.created_at| myDate}}</td>

              <td>

                <a href="#" @click="editModal(user)">

                  <i class="fa fa-edit"></i>

                </a>

                <a href="#" @click="deleteUser(user.id)">

                  <i class="fa fa-trash text-red"></i>

                </a>

              </td>

            </tr>

          </tbody>

        </table>

//Modal

<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">

...some modal code

Answer 1

我解决了。我只是玩我的代码并更改了代码<a href="#" @click="editModal(user)">到<a href="#" &nbsp;data-toggle="modal" data-target="#addNew" @click="editModal(user)">.&nbsp;你认为这是一个好的解决方案吗？是还是不是？请让我知道，以便我可以学习

Answer 2

我为你制作了工作示例new Vue({&nbsp; el: "#app",&nbsp;&nbsp;&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; users: []&nbsp; &nbsp; }&nbsp; },&nbsp;&nbsp;&nbsp; created() {&nbsp; &nbsp; this.fetchUsers()&nbsp; },&nbsp;&nbsp;&nbsp; methods: {&nbsp; &nbsp; fetchUsers() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axios.get('https://jsonplaceholder.typicode.com/users')&nbsp; &nbsp; &nbsp; &nbsp; .then(response => this.users = response.data)&nbsp; &nbsp; },&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; newModal() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#addNew').modal('show');&nbsp; &nbsp; },&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; editModal(user) {&nbsp; &nbsp; &nbsp; &nbsp; $('#addNew').modal('show');&nbsp; &nbsp; },&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>&nbsp;&nbsp;<div id="app">&nbsp; <button class="btn btn-success" @click="newModal"&nbsp; data-toggle="modal" data-target="#addNew">Add new</button>&nbsp; <table class="table table-hover">&nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp;<th>ID</th>&nbsp; &nbsp; &nbsp; &nbsp;<th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp;<th>Email</th>&nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;<tr v-for="user in users" :key="user.id">&nbsp; &nbsp; &nbsp; &nbsp;<td>{{user.id}}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>{{user.name}}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>{{user.email}}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="#" @click="editModal(user)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Edit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp;</tbody>&nbsp; </table>&nbsp;&nbsp;&nbsp; <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">&nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; Here I'm&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>