CODEWITHSUNDEEP
javascriptvue.js
Ivan Kolyhalov
Ivan Kolyhalov

Reputation: 1002

Vuejs: how to use component 2 in template of component 1

I am newbie in Vue and can't figure out how do I use one component in template of another one. Or in other case how do I combine components in html, make them nested or whatever. Can't figure it out from the docs and SO.

I am using vue via cdnjs yet.

For instance:

I have a root vue instance #app. Inside it I register two data arrays: one for container and another one for table in it.

Now in html I have a container i.e. inside it I want a table at a specific place of '<'container'>' how do I achieve it? If I put it straightforward inside '<'container'>' component table Vue does not recognise it as valid and shows error.

So far I am here:

        var app = new Vue({

         el: '#app',
         data: {
         containersList: [{container-object}],
         tablesList: [],
         methods(){}
        },

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

<container v-for="item in containerList> </container>

So up to this point, I managed to render components, populate them with data and make all components reactive.

And I need to populate containers with tables. And then maybe populate tables with tabs of tables or whatever, how do I do it?

My logic fails here.

let tableComponent = Vue.component('table-component', {
   props: ['item'],
   template: '<div class="table"></div>'
}
let container = Vue.component('container',{
   props: ['item'],
   template: '<div class="container"><table-component></table-component></div>

UPD: So it looks like it renders like provided here but shows error referring to "tablesList" array in data. For some reason it cannot access it and shows "Property or method "tablesList" is not defined on the instance but referenced during render".

So parent container component has access to it and child component does not and throws error.

Upvotes: 0

Views: 268

Answers (1)

Gabriel Willemann
Gabriel Willemann

Reputation: 1921

I fixed something in your code and I build a minimal example.

See the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <container></container>
    </div>
    <script>
      let tableComponent = Vue.component("table-component", {
        props: ["item"],
        template: '<div class="table">table-component</div>'
      });

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

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: []
          };
        },
        methods: {
          anyMethod() {
            console.log("teste");
          }
        }
      });
    </script>
  </body>
</html>

Upvotes: 1

Related Questions