Property should be unique between Vue options

  • VUE_DUPLICATE_PROPERTY_IN_OPTION
  • Error
  • Medium
  • 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.

Noncompliant Code Example

View with compliant examples side by side
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

View with noncompliant examples side by side
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.