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']}
コピー
<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']}
コピー
<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
コピー
{
"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: ['/^\$/']}]}
コピー
<template>
<!-- GOOD -->
<div>{{ $t('foo') }}</div>
</template>
<script>
export default {
mounted() {
/* GOOD */
const hash = this.$route.hash
}
}
</script>