Movatterモバイル変換


[0]ホーム

URL:


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 indata orcomputed option will be ignored (e.g.$options).
  2. Reserved attribute names inprops option will be ignored (e.g.key).
  3. Reserved property names inmethods option will overwrite the reserved methods (e.g.$watch).

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

Noncompliant Code ExampleCompliant Code Example
1<script>1<script>
2export default {2export default {
3 data() {3 data() {
4 return {4 return {
5 $options: [ // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$options' property is predefined in a Vue instance.5 optionsData: [
6 { id: 'opt1', name: 'my option 1' },6 { id: 'opt1', name: 'my option 1' },
7 { id: 'opt2', name: 'my option 2' }7 { id: 'opt2', name: 'my option 2' }
8 ]8 ]
9 };9 };
10 },10 },
11 props: {11 props: {
12 key: { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the 'key' attribute is one of special attributes of Vue.12 keyProp: {
13 type: String,13 type: String,
14 required: true14 required: true
15 }15 }
16 },16 },
17 methods: {17 methods: {
18 $watch() { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$set' method is predefined in a Vue instance.18 watchData() {
19 // do something19 // do something
20 }20 }
21 }21 }
22}22}
23</script>23</script>

Noncompliant Code Example

View with compliant examples side by side
<script>export default {  data() {    return {      $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' }      ]    };  },  props: {    key: { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the 'key' attribute is one of special attributes of Vue.      type: String,      required: true    }  },  methods: {    $watch() { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$set' method is predefined in a Vue instance.      // do something    }  }}</script>

Compliant Code Example

View with noncompliant examples side by side
<script>export default {  data() {    return {      optionsData: [        { id: 'opt1', name: 'my option 1' },        { id: 'opt2', name: 'my option 2' }      ]    };  },  props: {    keyProp: {      type: String,      required: true    }  },  methods: {            watchData() {      // do something    }  }}</script>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

Was this documentation helpful?

Last updated on April 29, 2025

[8]ページ先頭

©2009-2025 Movatter.jp