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

Posted 2023-02-22

【中文标题】Vue @click 事件不适用于显示模式

【英文标题】：Vue @click event not working for showing modal

【发布时间】：2019-12-08 16:38:25

【问题描述】：

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

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



<script>
export default 
  data() 
    return 
      users: ,
      form: new Form(
        name: "",
        email: "",
        password: "",
        type: "",
        bio: "",
        photo: ""
      )
    ;
  ,

  methods: 

    editModal(user)
         this.form.reset();
         $('#addNew').modal('show');
    ,
      newModal()
          this.form.reset();
          $('#addNew').modal('show');
    ,

    loadUsers() 
      axios.get("api/user").then(( data ) => (this.users = data.data));
    ,
    createUser() 
      this.$Progress.start();
      this.form.post("api/user")

      .then(() => 
        $("#addNew").modal("hide");
        $(".modal-backdrop").remove();
        toast.fire(
          type: "success",
          title: "User Created!",
          position: "top-end"
        );
     Fire.$emit("AfterCreate")
      );
      this.$Progress.finish();
    ,
    deleteUser(id) 
      swal.fire(
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
      ).then(result => 

          //send delete request
           if (result.value) 
          this.form.delete('api/user/' +id)
            .then(()=>

                swal.fire("Deleted!", "", "success");
                 Fire.$emit("AfterCreate")

            )
            .catch(()=>
                swal.fire("Something went wrong.", "", "warning");
            );
           
      );

    
  ,
  created() 
    console.log("Component mounted.");
    this.loadUsers();
    Fire.$on("AfterCreate",()=> 
      this.loadUsers();
    );
  
;
</script>

【问题讨论】：

请在 jsfiddle 添加你的实现

我不知道如何在 jsfiddle 先生处添加代码。我只是 *** 的新手

jsfiddle.net

editModal 怎么不起作用？模型根本没有显示还是其他什么？

您的开发控制台中是否有任何错误？

【参考方案1】：

我解决了。我只是在玩我的代码并从

更改了代码

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

到

<a href="#" data-toggle="modal" data-target="#addNew" @click="editModal(user)">

。 你认为这是一个好的解决方案吗？是还是不是？请告诉我，以便我学习

【参考方案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>

【讨论】：

我在代码中使用了$('#addNew').modal('show');，但仍然无法正常工作。有什么想法吗？

它在这里运行但是当我在我的代码中实现它时它不起作用。我怎么能刷新我的 js 文件或类似的东西？我想这就是我需要的