CODEWITHSUNDEEP
javascriptvue.js
Ivan Kolyhalov
Ivan Kolyhalov

Reputation: 1002

Vuejs: data list not accessible from template in another template

So I have this set-up, which crashes on v-for construct of table-component. It shows an error: "Property or method "tablesList" is not defined on the instance but referenced during render". If I omit v-for table-component renders. If I access this data from "container" component all is fine. So the problem is in accessing data from child template in parent template.

What am I doing wrong?

let container = Vue.component("container", {
        props: ["item"],
        template: `<div class="container">

            <table-component v-for="item in tablesList"></table-component>
          </div>`
      });

let table = Vue.component("table-component", {
        props: ["item"],
        template: `<div class="table">
            this is a table
          </div>`
      });

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: [{item:'item'}]
          };
        },
        methods: {
          anyMethod() {

          }
        }
      });
    </script>

Upvotes: 1

Views: 51

Answers (2)

rmontanodev
rmontanodev

Reputation: 139

You need to define tablesList in props => https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Upvotes: 1

BadPiggie
BadPiggie

Reputation: 6369

You are using tablesList in container component But you defined it in app.

You need to add tablesList in container like below,

let container = Vue.component("container", {
    props: ["item"],
    data: () => {
       return {
          tablesList: [{item:'item'}]
       }
    },
    template: `<div class="container">
                <table-component v-for="item in tablesList"></table-component>
              </div>`
    });

NOTE: Use v-bind:key when use v-for.

Upvotes: 1

Related Questions