Read-only property of Vue should not be assigned

  • VUE_ASSIGN_TO_READONLY_PROPERTY
  • Error
  • Medium
  • vue

This rule applies when a value is assigned to the read-only properties of Vue.

The read-only properties of Vue are as follows:

  1. vm.$data
  2. vm.$props
  3. vm.$el
  4. vm.$options
  5. vm.$parent
  6. vm.$root
  7. vm.$children
  8. vm.$slots
  9. vm.$scopedSlots
  10. vm.$refs
  11. vm.$isServer
  12. vm.$attrs
  13. vm.$listeners
  14. Vue.config

Assignment to the above properties will be ignored or may cause an unintended behavior. Also, Vue outputs a warning message.

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

Noncompliant Code Example

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

// Example 1
new Vue({
  el: '#app',
  data: { msg: '' },
  mounted() {
    this.$data = { msg: 'hi' }; // VUE_ASSIGN_TO_RESERVED_PROPERTY alarm because 'this.$data' is read-only.
  },
  template: '<div>{{ msg }}</div>'
});

// Example 2
Vue.config = { // VUE_ASSIGN_TO_RESERVED_PROPERTY alarm because 'Vue.config' is a read-only global API of Vue.
  silent: true
};

Compliant Code Example

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

// Example 1
new Vue({
  el: '#app',
  data: { msg: '' },
  mounted() {
    this.msg = 'hi'; // Use nested data properties instead.
  },
  template: '<div>{{ msg }}</div>'
});

// Example 2
Vue.config.silent = true; // Set individual fields instead.

Version

This rule was introduced in DeepScan 1.16.0-beta.

See

  • Vue instance properties

  • Vue.config API

  • [Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.

  • [Vue warn]: $props is readonly.

  • [Vue warn]: Error in mounted hook: TypeError: Cannot set property $isServer of #<Vue> which has only a getter

  • [Vue warn]: $attrs is readonly.

  • [Vue warn]: $listeners is readonly.

  • [Vue warn]: Do not replace the Vue.config object, set individual fields instead.