src/content/docs/linter/rules/no-vue-duplicate-keys.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.2.5` - Diagnostic Category: [`lint/correctness/noVueDuplicateKeys`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/no-dupe-keys`](https://eslint.vuejs.org/rules/no-dupe-keys){
"linter": {
"rules": {
"correctness": {
"noVueDuplicateKeys": "error"
}
}
}
}
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.
<script>
export default {
props: ['foo'],
data() {
return {
foo: 'bar'
};
}
};
</script>
<script>
export default {
data() {
return {
message: 'hello'
};
},
methods: {
message() {
console.log('duplicate key');
}
}
};
</script>
<script>
export default {
computed: {
count() {
return this.value * 2;
}
},
methods: {
count() {
this.value++;
}
}
};
</script>
<script>
export default {
props: ['foo'],
data() {
return {
bar: 'baz'
};
},
methods: {
handleClick() {
console.log('unique key');
}
}
};
</script>
<script>
export default {
computed: {
displayMessage() {
return this.message.toUpperCase();
}
},
methods: {
clearMessage() {
this.message = '';
}
}
};
</script>