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