Vue option's property name should not be a reserved name of Vue

  • VUE_RESERVED_PROPERTY_IN_OPTION
  • Error
  • Medium
  • vue

This rule applies when reserved names of Vue are used as Vue option's property names.

If Vue's reserved name is used as user-defined property name, unintended behaviors may occur as follows:

  1. Reserved property names in data or computed option will be ignored (e.g. $parent)
  2. Reserved attribute names in props option will be ignored (e.g. key)
  3. Reserved property names in methods option will overwrite the reserved methods (e.g. $set)

For cases 2 and 3 above, Vue outputs warning messages.

Noncompliant Code Example

View with compliant examples side by side
import Vue from 'vue';

// Example 1
new Vue({
  el: '#app',
  data: {
    $options: [ // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$options' property is predefined in a Vue instance.
      { id: 'opt1', name: 'my option 1' },
      { id: 'opt2', name: 'my option 2' }
    ]
  },
  methods: {
    $set() { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$set' method is predefined in a Vue instance.
      // do something
    }
  },
  template: '<div @click="$set"><div v-for="opt in $options" :key="opt.id">{{ opt.name }}</div></div>'
});

// Example 2
new Vue({
  el: '#app',
  components: {
    Hello: {
      props: {
        key: { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the 'key' attribute is one of special attributes of Vue.
          type: String,
          required: true
        }
      },
      template: '<div>{{ this.key }}</div>'
    }
  },
  template: '<Hello key="hi" />'
});

Compliant Code Example

View with noncompliant examples side by side
import Vue from 'vue';

// Example 1
new Vue({
  el: '#app',
  data: {
    optionsData: [
      { id: 'opt1', name: 'my option 1' },
      { id: 'opt2', name: 'my option 2' }
    ]
  },
  methods: {
    setData() {
      // do something
    }
  },
  template: '<div @click="setData"><div v-for="opt in optionsData" :key="opt.id">{{ opt.name }}</div></div>'
});

// Example 2
new Vue({
  el: '#app',
  components: {
    Hello: {
      props: {
        keyProp: {
          type: String,
          required: true
        }
      },
      template: '<div>{{ this.keyProp }}</div>'
    }
  },
  template: '<Hello keyProp="hi" />'
});

Version

This rule was introduced in DeepScan 1.15.0-beta.

See