Property should be unique between Vue options

• VUE_DUPLICATE_PROPERTY_IN_OPTION
• Error
• Medium, Low
• vue

This rule applies when multiple properties with the same name are defined between Vue options.

If duplicate property names are declared between the following Vue options, only one of them is used:

1. props
2. computed
3. data
4. methods

Duplicate properties can lead to unintended behavior because the values specified at others are ignored. Also Vue outputs a warning message.

This rule also applies when duplicate elements exist inside an array-style props option. Although immediate problems may not occur in this case, it is recommended to remove the duplicates for code readability and maintainability.

Noncompliant Code Example

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    foo: 'hi',
    myName: 'Mike'
  },
  computed: {
    foo() { // VUE_DUPLICATE_PROPERTY_IN_OPTION alarm because 'foo' is already defined in 'data' option.
      return this.myName + ' hi';
    }
  },
  template: '<div>{{ foo }}</div>'
});

Compliant Code Example

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    myName: 'Mike'
  },
  computed: {
    foo() {
      return this.myName + ' hi';
    }
  },
  template: '<div>{{ foo }}</div>'
});

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

• [Vue warn]: The computed property foo is already defined in data.

• [Vue warn]: The data property foo is already declared as a prop. Use prop default value instead.

• [Vue warn]: Method foo has already been defined as a data property.

• [Vue warn]: Method foo has already been defined as a prop.