Karlom
Karlom

Reputation: 14874

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

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?

Upvotes: 13

Views: 11776

Answers (3)

MH Fuad
MH Fuad

Reputation: 775

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

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.

Upvotes: 2

C3roe
C3roe

Reputation: 96382

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 ...

Upvotes: 34

Related Questions