# vue/no-undef-properties

disallow undefined properties

# 📖 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.

Note

This rule cannot detect properties defined in other files or components.
Note that there are many false positives if you are using mixins.

<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>
Now loading...
<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>
Now loading...

# 🔧 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)

<template> <!-- ✓ GOOD --> <div>{{ $t('foo') }}</div> </template> <script> export default { mounted() { /* ✓ GOOD */ const hash = this.$route.hash } } </script>
Now loading...

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.20.0

# 🔍 Implementation

Last Updated: 10/20/2021, 4:29:45 AM