noVueDuplicateKeys

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.2.5

¥Rule available since: v2.2.5
诊断类别：lint/nursery/noVueDuplicateKeys

¥Diagnostic Category: lint/nursery/noVueDuplicateKeys
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 与 vue/no-dupe-keys 相同
  
  ¥Same as vue/no-dupe-keys

如何配置

¥How to configure

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

描述

¥Description

禁止在 Vue 组件的数据、方法、计算属性和其他选项中使用重复的键。

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

此规则禁止在不同的 Vue 组件选项（例如 props、data、computed、methods 和 setup）中使用重复的键。即使脚本标签中的键不冲突，它们也可能导致模板出现问题，因为 Vue 允许直接访问这些键。

¥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>

noVueDuplicateKeys

摘要

如何配置

描述

示例

无效

有效

相关链接