javascript - Vue.js Axios : How to call method from an HTML component passing an argument

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

日志自行清除

avoid using JavaScript unary operator as property name

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