Read-only property of Vue should not be assigned
This rule applies when a value is assigned to the read-only properties of Vue.
The read-only properties of Vue are as follows:
$data$props$el$options$parent$root$children$slots$scopedSlots$refs$isServer$attrs$listenersVue.config (Vue 2.x) orapp.config (Vue 3.x)Assignment to the above properties will be ignored or may cause an unintended behavior. Also, Vue outputs a warning message.
| Noncompliant Code Example | Compliant Code Example | ||
|---|---|---|---|
| 1 | <script> | 1 | <script> |
| 2 | export default { | 2 | export default { |
| 3 | data() { | 3 | data() { |
| 4 | return { msg: '' }; | 4 | return { msg: '' }; |
| 5 | }, | 5 | }, |
| 6 | mounted() { | 6 | mounted() { |
| 7 | this.$data = { msg: 'hi' }; // VUE_ASSIGN_TO_READONLY_PROPERTY alarm because 'this.$data' is read-only. | 7 | this.msg = 'hi'; // Use nested data properties instead. |
| 8 | } | 8 | } |
| 9 | } | 9 | } |
| 10 | </script> | 10 | </script> |
<script>export default { data() { return { msg: '' }; }, mounted() { this.$data = { msg: 'hi' }; // VUE_ASSIGN_TO_READONLY_PROPERTY alarm because 'this.$data' is read-only. }}</script><script>export default { data() { return { msg: '' }; }, mounted() { this.msg = 'hi'; // Use nested data properties instead. }}</script>This rule was introduced in DeepScan 1.16.0-beta.
[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.