How to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js?

Sometimes, we want to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

In this article, we’ll look at how to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

How to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js?

To fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js, we should make sure the reactive property we’re referencing in the template is defined in the component code.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: "",
    };
  },
};
</script>

to define the name reactive property by returning the name property in the object returned in the data method,

And then we can reference the name value in the template without errors.

How to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js?

Conclusion