为什么我在 vue.js 中得到“避免使用 JavaScript 一元运算符作为属性名称”？

Question

在一个 vue.js 模板中，我有这个代码来删除一个笑话

<div  v-on:click="delete(joke)" class="btn btn-sm">delete</div>

以及这样做的方法：

delete: function(joke) {
    console.log('delete requested');
    axios.post( this.BASE_URL + "/delete" , {
        id: joke.id,
        token: this.token,
    }).then( (res) => { 
        this.$router.push({ path: '/' });
    })
    .catch( (error) => {
        console.log(error);             
  });
},

我收到此错误：

避免在表达式 v-on:click="delete(joke)" 中使用 JavaScript 一元运算符作为属性名称：“delete(joke)”

奇怪的是，在其他组件中，我以相同的方式将相同的joke对象传递给方法并且没有出错。

我想知道这里有什么问题以及如何解决？

Answer 1

我想知道这里有什么问题

delete是 JavaScript 中定义的运算符。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

以及如何解决它？

选择与delete不同的方法名称...

Answer 2

您可以将任何您想要的名称命名为对象中的属性名称。 但是在v-on:绑定需要是一个表达式。 使用delete关键字应该有未完成的表达式。 如果您选择的不是保留关键字，那么您将获得您在 vue 实例中定义的方法。

我可以在可视化代码 IDE 上看到以下错误：

[vue-language-server] 'v-on' 指令需要该属性值或动词修饰符。

[vue-language-server] 解析错误：意外的表达式结束。

因此要解决这个问题，你必须给出一个不同的名字，它不是 JavaScript 中的保留关键字。

Answer 3

delete 是一个 javascript 保留字，用于删除对象属性。 所以更改方法名称。