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="#"  data-toggle="modal" data-target="#addNew" @click="editModal(user)">

. 你认为这是一个好的解决方案吗？是还是不是？请让我知道，以便我可以学习

Answer 2

我为你制作了工作示例

new Vue({

  el: "#app",

  

  data() {

    return {

      users: []

    }

  },

  

  created() {

    this.fetchUsers()

  },

  

  methods: {

    fetchUsers() {

            axios.get('https://jsonplaceholder.typicode.com/users')

        .then(response => this.users = response.data)

    },

    

    newModal() {

            $('#addNew').modal('show');

    },

    

    editModal(user) {

        $('#addNew').modal('show');

    },

  }

})

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

<div id="app">

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

  <table class="table table-hover">

   <tbody>

     <tr>

       <th>ID</th>

       <th>Name</th>

       <th>Email</th>

       <th></th>

     </tr>

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

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

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

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

       <td>

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

           Edit

         </a>

       </td>

     </tr>

   </tbody>

  </table>

  

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

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        Here I'm

      </div>

    </div>

  </div>

</div>