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.