Vuejs: data list not accessible from template in another template

Question

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>

Why dont you add tablesList to your container component instead of table-component? — Andre Nuechter
– Andre Nuechter, Commented Mar 30, 2020 at 16:20
tablesList is in Vue instance not in table-component. Or am I getting you wrong? — Ivan Kolyhalov
– Ivan Kolyhalov, Commented Mar 30, 2020 at 17:35

BadPiggie · Accepted Answer · 2020-03-30 16:30:37Z

1

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.

answered Mar 30, 2020 at 16:30

BadPiggie

6,4391 gold badge17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan Kolyhalov Over a year ago

aha, that makes sense. Let me check it out. Yet upvote for you :)

Ivan Kolyhalov Over a year ago

Alright! It worked. I get a bunch of new errors, but I'll figure them out later. Thanks mate! ))

tony19 · Accepted Answer · 2022-07-15 00:52:12Z

1

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

edited Jul 15, 2022 at 0:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 30, 2020 at 16:26

rmontanodev

1392 bronze badges

1 Comment

Dharman Over a year ago

Could you explain how to do it, please?

Collectives™ on Stack Overflow

Vuejs: data list not accessible from template in another template

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related