Why I get 'avoid using JavaScript unary operator as property name' in vue.js?

Question

In a vue.js template, I have this code to delete a joke

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

and the method to do so:

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

I get this error:

avoid using JavaScript unary operator as property name: "delete(joke)" in expression v-on:click="delete(joke)"

The odd thing is that, in other components, I pass the same joke object to methods in the same manner and get no errors.

I'm wondering what is wrong here and how to fix it?

Answer 1

I'm wondering what is wrong here

delete is an operator defined in JavaScript.

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

and how to fix it?

Choose a different method name than delete ...

Answer 2

You can name whatever you want as your property name in an object. But binding in a v-on: requires to be an expression. Using delete keyword there supposed be uncompleted expression. If you choose other than the reserved keyword, then you get the method that you have defined in your vue instance.

I can see the following error on visual code IDE:

[vue-language-server] 'v-on' directives require that attribute value or verb modifiers.

[vue-language-server] Parsing error: Unexpected end of expression.

Thus to resolve the problem you must give a different name which is not reserved keyword in JavaScript.

Answer 3

delete is a javascript reserve word its use to delete an object property. so change method name.