[Vue Warn]: Property or Method Is Not Defined on the Instance But Referenced During Render

[Vue warn]: Property or method is not defined on the instance but referenced during render

Problem

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

The error is occurring because the changeSetting method is being referenced in the MainTable component here:

    "<button @click='changeSetting(index)'> Info </button>" +

However the changeSetting method is not defined in the MainTable component. It is being defined in the root component here:

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

What needs to be remembered is that properties and methods can only be referenced in the scope where they are defined.

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

You can read more about component compilation scope in Vue's documentation.

What can I do about it?

So far there has been a lot of talk about defining things in the correct scope so the fix is just to move the changeSetting definition into the MainTable component?

It seems that simple but here's what I recommend.

You'd probably want your MainTable component to be a dumb/presentational component. (Here is something to read if you don't know what it is but a tl;dr is that the component is just responsible for rendering something – no logic). The smart/container element is responsible for the logic – in the example given in your question the root component would be the smart/container component. With this architecture you can use Vue's parent-child communication methods for the components to interact. You pass down the data for MainTable via props and emit user actions from MainTable to its parent via events. It might look something like this:

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});

var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

The above should be enough to give you a good idea of what to do and kickstart resolving your issue.

Vue.js : Property or method is not defined on the instance but referenced during render

It seems a very simple mistake:

:title="Dashboard"

in Vue using a column (:) to prepend a prop or an attribute on a component, will use a property defined or in props or in data.
While if you use title="dashboard" you'll actually pass a string, that is what you want

is not defined on the instance but referenced during render but works as i want

In your code, "text/x-template" is actually inside the div the vue instance is attached to. Vue documentation states that template definition in this manner needs to be outside the attached DOM element, By moving the template code outside the attached div, the warning goes away.

https://v2.vuejs.org/v2/guide/components-edge-cases.html#X-Templates

Your x-template needs to be defined outside the DOM element to which Vue is attached.

In your code, Vue is encountering 'count' inside the attached div, but 'count' is not actually defined inside the root instance. The warning most likely stems from this.

[Vue warn]: Property or method list is not defined on the instance but referenced during render. Make sure that this property is reactive [...]

First of all, you don't need to import there Vue and VueAxios, as they are no use there. And second, you need to modify your list variable value from undefined to []

I have changed your CharactersList component code, you can copy and paste all codes, and it will work as the way you want:

CharactersList.vue

<template>
    <div>
        <h1>Rick and Morty characters</h1>
        <table border="1px">
            <tr>
                <td>Character ID</td>
                <td>Name</td>
                <td>Species</td>
                <td>Add to fav</td>
            </tr>
            <tr v-for="item in list" v-bind:key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.species}}</td>
                <button>Add to fav</button>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'CharactersList',
  data: function () {
    return {
      list: []
    }
  },
  mounted () {
    axios.get('https://rickandmortyapi.com/api/character/')
      .then((resp) => {
        this.list = resp.data.results
      })
  }
}
</script>

Vue property or method is not defined on the instance but referenced during render?

This error occurs when trying to use a property or method in the template (or render function) that doesn't exist on the component instance.

In this case it's because searchs and searchFunc variables used in the template of Home.vue are not found below on the instance. They are in the wrong file and need to be moved into Home.vue. Data needs to also go inside the data option:

main.js

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Home.vue

<script>
const Hotels = [
  { name: "Sham", city: "Damascus", bed: 1, price: 100, id: "h1" },
  { name: "Shahbaa", city: "Aleppo", bed: 3, price: 200, id: "h2" },
  { name: "abcd", city: "Homs", bed: 5, price: 350, id: "h3" },
];
export default {
  name: "Home",
  data() {
    return {
      searchs: '',
      Hotels,
    }
  },
  computed: {
    searchfunc() {
      return this.Hotels.filter((srh) => {
        return srh.price >= parseInt(this.searchs);
      });
    }
  }
};
</script>

(Vue3) [Vue warn]: Property ... was accessed during render but is not defined on instance. at App error when Class binding

The issue is in the class-binding:

:class="{ notclicked: !item.isclicked, clicked: item.isclicked }"

---

Related Topics