no-undef-properties.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-undef-properties	disallow undefined properties	v7.20.0

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.

::: warning 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>

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

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

🚀 Version

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

🔍 Implementation

• Rule source
• Test source