Question

我正在创建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>

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>

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

2 个答案: