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

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

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

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

For instance, we write

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

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

to add the name reactive property in the object returned by data.

Then we can reference name in the template without errors.

Conclusion

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