Categories
Vue Answers

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

Spread the love

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.

Conclusion

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *