JS.VUE.NO.UNDEF.PROPERTIES
Udefined properties used
Rule Details
This rule warns of using undefined properties.
This rule can help you locate potential errors resulting from misspellings property names, and implicitly added properties.
This rule cannot detect properties defined in other files or components.
Note that there are many false positives if you are using mixins.
{'vue/no-undef-properties': ['error']}
Copy
<template>
<!-- GOOD -->
<div>{{ name }}: {{ count }}</div>
<!-- BAD -->
<div>{{ label }}: {{ cnt }}</div>
</template>
<script setup>
const prop = defineProps(['name', 'def'])
let count = 0
/* GOOD */
watch(() => prop.def, () => console.log('Updated!'))
/* BAD */
watch(() => prop.undef, () => console.log('Updated!'))
</script>
{'vue/no-undef-properties': ['error']}
Copy
<template>
<!-- GOOD -->
<div>{{ name }}: {{ count }}</div>
<!-- BAD -->
<div>{{ label }}: {{ cnt }}</div>
</template>
<script>
export default {
props: ['name'],
data () {
return {
count: 0
}
},
methods: {
click() {
/* GOOD */
this.count++
/* BAD */
this.cnt++
}
}
}
</script>
Options
Copy
{
"vue/no-undef-properties": ["error", {
"ignores": ["/^\\$/"]
}]
}
ignores(string[]) ... An array of property names or patterns that have already been defined property, or property to ignore from the check. Default is["/^\\$/"].
"ignores": ["/^\\$/"] (default)
{'vue/no-undef-properties': ['error', {ignores: ['/^\$/']}]}
Copy
<template>
<!-- GOOD -->
<div>{{ $t('foo') }}</div>
</template>
<script>
export default {
mounted() {
/* GOOD */
const hash = this.$route.hash
}
}
</script>