Question

从HTML组件调用axios函数时，我遇到了一个问题。我需要调用从迭代传递作为参数的函数“ user.id”：

<tr v-for="user in users" :key="user.id">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.surname}}</td>
    <td>  <button class="button"  @click="delete(user.id)">Delete</button></td>
</tr>

通过该功能，我可以为该user.id发送一个DELETE请求。

methods: {
    delete: function(id) {

         alert('I am deleting " +id)
         // Delete here
    },

似乎我在这里有多个问题，第一个是从日志中发现的问题：

avoid using JavaScript unary operator as property name: "delete(user.id)" in expression @click="delete(user.id)"

最后，甚至不调用delete函数。我想知道是否有办法解决这个问题。谢谢

Answer 1

日志清除自身

避免使用JavaScript一元运算符作为属性名称

delete是用JavaScript定义的运算符。参考-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

为您的方法选择其他名称

尝试使用deleteUser作为方法名称

<tr v-for="user in users" :key="user.id">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.surname}}</td>
    <td>  <button class="button"  @click="deleteUser(user.id)">Delete</button></td>
</tr>

methods: {
    deleteUser: function(id) {

         alert("I am deleting " +id)
         // Delete here
    },

Vue.js Axios：如何通过传递自变量的HTML组件调用方法

1 个答案: