為什么我在 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 保留字，用於刪除對象屬性。 所以更改方法名稱。