Vue option's property name should not be a reserved name of 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:
data
orcomputed
option will be ignored (e.g.$options
).props
option will be ignored (e.g.key
).methods
option will overwrite the reserved methods (e.g.$watch
).For cases 2 and 3 above, Vue outputs warning messages.
Noncompliant Code Example | Compliant Code Example | ||
---|---|---|---|
1 | <script> | 1 | <script> |
2 | export default { | 2 | export 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: true | 14 | 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 something | 19 | // do something |
20 | } | 20 | } |
21 | } | 21 | } |
22 | } | 22 | } |
23 | </script> | 23 | </script> |
<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>
<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>
This rule was introduced in DeepScan 1.15.0-beta.
[Vue warn]: Method$watch
conflicts with an existing Vue instance method. Avoid defining component methods that start with _ or $.
[Vue warn]:key
is a reserved attribute and cannot be used as component prop.