noVueDuplicateKeys

JavaScript (and super languages)

Summary

Rule available since: v2.2.5
Diagnostic Category: lint/nursery/noVueDuplicateKeys
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-dupe-keys

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDuplicateKeys": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow duplicate keys in Vue component data, methods, computed properties, and other options.

This rule prevents the use of duplicate keys across different Vue component options such as props, data, computed, methods, and setup. Even if keys don’t conflict in the script tag, they may cause issues in the template since Vue allows direct access to these keys.

Examples

Invalid

1
<script>
2
export default {
3
    props: ['foo'],
4
    data() {
5
        return {
6
            foo: 'bar'
7
        };
8
    }
9
};
10
</script>

code-block.vue:2:13 lint/nursery/noVueDuplicateKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate key foo found in Vue component.
  
    1 │ export default {
  > 2 │     props: [‘foo’],
      │             ^^^^^
    3 │     data() {
    4 │         return {
  
  ℹ Key foo is also defined here.
  
    3 │     data() {
    4 │         return {
  > 5 │             foo: ‘bar’
      │             ^^^
    6 │         };
    7 │     }
  
  ℹ Keys defined in different Vue component options (props, data, methods, computed) can conflict when accessed in the template. Rename the key to avoid conflicts.

1
<script>
2
export default {
3
    data() {
4
        return {
5
            message: 'hello'
6
        };
7
    },
8
    methods: {
9
        message() {
10
            console.log('duplicate key');
11
        }
12
    }
13
};
14
</script>

code-block.vue:4:13 lint/nursery/noVueDuplicateKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate key message found in Vue component.
  
    2 │     data() {
    3 │         return {
  > 4 │             message: ‘hello’
      │             ^^^^^^^
    5 │         };
    6 │     },
  
  ℹ Key message is also defined here.
  
     6 │     },
     7 │     methods: {
   > 8 │         message() {
       │         ^^^^^^^
     9 │             console.log(‘duplicate key’);
    10 │         }
  
  ℹ Keys defined in different Vue component options (props, data, methods, computed) can conflict when accessed in the template. Rename the key to avoid conflicts.

1
<script>
2
export default {
3
    computed: {
4
        count() {
5
            return this.value * 2;
6
        }
7
    },
8
    methods: {
9
        count() {
10
            this.value++;
11
        }
12
    }
13
};
14
</script>

code-block.vue:3:9 lint/nursery/noVueDuplicateKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate key count found in Vue component.
  
    1 │ export default {
    2 │     computed: {
  > 3 │         count() {
      │         ^^^^^
    4 │             return this.value * 2;
    5 │         }
  
  ℹ Key count is also defined here.
  
     6 │     },
     7 │     methods: {
   > 8 │         count() {
       │         ^^^^^
     9 │             this.value++;
    10 │         }
  
  ℹ Keys defined in different Vue component options (props, data, methods, computed) can conflict when accessed in the template. Rename the key to avoid conflicts.

Valid

1
<script>
2
export default {
3
    props: ['foo'],
4
    data() {
5
        return {
6
            bar: 'baz'
7
        };
8
    },
9
    methods: {
10
        handleClick() {
11
            console.log('unique key');
12
        }
13
    }
14
};
15
</script>

1
<script>
2
export default {
3
    computed: {
4
        displayMessage() {
5
            return this.message.toUpperCase();
6
        }
7
    },
8
    methods: {
9
        clearMessage() {
10
            this.message = '';
11
        }
12
    }
13
};
14
</script>