CODEWITHSUNDEEP
javascriptvue.js
Soth
Soth

Reputation: 3045

Vue.delete warning to avoid using JavaScript unary operator as property name on click

I get the following warning when using Vue.delete:

[Vue warn]: Error compiling template: avoid using JavaScript unary operator as property name: "delete(testObj,)" in expression @click="Vue.delete(testObj,'label')"

I can use Vue.delete anywhere else and it seems fine. Am I using it wrong?

new Vue({
  el: '#app',
  data() {
    return {
      testObj: {
        label: "The label"
      }
    };
  }

});
<div id="app">
  {{testObj.label}}
  <button @click="Vue.delete(testObj,'label')">Delete</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Upvotes: 0

Views: 379

Answers (1)

skirtle
skirtle

Reputation: 29122

The global Vue will not be available inside your template. Everything in a template is scoped to the current Vue instance, so you're effectively trying to access this.Vue. Trying to access any of the properties of the global Vue won't work.

You can use $delete instead of Vue.delete inside a template.

https://v2.vuejs.org/v2/api/#vm-delete

new Vue({
  el: '#app',
  data() {
    return {
      testObj: {
        label: "The label"
      }
    };
  }

});
<div id="app">
  {{testObj.label}}
  <button @click="$delete(testObj, 'label')">Delete</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

I would add that the specific error message you're seeing relates more generally to trying to use any property called delete but that's something of a moot point as you should be using $delete anyway.

Upvotes: 2

Related Questions