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

user_5774375 0
Viewed 10810

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?

vue.js javascript
3 Answers
user_14278780

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.

user_21387520

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

user_66876000
Related