Vue's global API Vue.set and Vue.delete should be called with proper argument

• VUE_BAD_PROPERTY_SET_DELETE
• Error
• Medium
• vue

This rule applies when Vue.set() or Vue.delete() is called with wrong arguments.

The first argument of Vue.set() or Vue.delete() cannot be a Vue instance, or the root data object of a Vue instance. In this case, Vue outputs a warning message and ignores the function call.

Vue does not allow dynamically adding or deleting root-level reactive properties to an already created instance.

• In order to modify the value of a root-level property at runtime, declare the property upfront in data option and modify it by assigning the value instead of calling the API.
• In order to add or delete reactive properties at runtime, make a wrapper object and call Vue.set() or Vue.delete() method on the object.

Note: This rule is based on Vue 2.x API specifications.

Noncompliant Code Example

<template>
  <div>
    <input class="input" type="text" v-model="inputString">
    <button @click="storeString">+</button>
    <button @click="resetString">-</button>
    <p>
      {{ this.$data }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputString: ''
    }
  },
  methods: {
    storeString() {
      // NOTE: this.$set is an alias to the global Vue.set
      this.$set(this, 'storedString', this.inputString); // VUE_BAD_PROPERTY_SET_DELETE alarm
    },
    resetString() {
      // NOTE: this.$delete is an alias to the global Vue.delete
      this.$delete(this, 'storedString'); // VUE_BAD_PROPERTY_SET_DELETE alarm
    }
  }
}
</script>

Compliant Code Example

<template>
  <div>
    <input class="input" type="text" v-model="inputString">
    <button @click="storeString">+</button>
    <button @click="resetString">-</button>
    <p>
      {{ this.$data }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputString: '',
      storedString: ''
    }
  },
  methods: {
    storeString() {
      // NOTE: this.$set is an alias to the global Vue.set
      this.storedString = this.inputString;
    },
    resetString() {
      // NOTE: this.$delete is an alias to the global Vue.delete
      this.storedString = null;
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

• Vue.set

• Vue.delete

• Reactivity in Depth

• [Vue warn] Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

• [Vue warn] Avoid deleting properties on a Vue instance or its root $data - just set it to null.