Each attribute of a Vue element should be unique
- VUE_DUPLICATE_ATTRIBUTE
- Error
- High, Medium
- vue
This rule applies when a Vue element has multiple attributes with the same name.
If an element has duplicate attributes, Vue may throw a compile error. Even when no error occurs, only one of the attributes is used, which can lead to unintended behavior because values specified at others are ignored.
Noncompliant Code Example
View with compliant examples side by side<template>
<!-- VUE_DUPLICATE_ATTRIBUTE alarm -->
<person
:name="userName"
name="Bob"
/>
</template>
<script>
export default {
props: ["name"],
computed: {
userName: function () {
return this.name || "anonymous";
}
},
components: {
person: {
props: ['name'],
template: "<div>name: {{ name }}</div>"
}
}
}
</script>Compliant Code Example
View with noncompliant examples side by side<template>
<person
:name="userName"
/>
</template>
<script>
export default {
props: ["name"],
computed: {
userName: function () {
return this.name || "anonymous";
}
},
components: {
person: {
props: ['name'],
template: "<div>name: {{ name }}</div>"
}
}
}
</script>Version
This rule was introduced in DeepScan 1.14.0-beta.