$vm0.$children return 0 element but there has 3 children

Published 1 month ago by didedadob

I am following laracast vue 2.0, in #11 number tutorial i have the same code that tutorial have. If i see i have 3 children. alt text

But whenever i try to get those element i found it return an array of 0 element. alt text

Tomi
Tomi
1 month ago (5,670 XP)

Can you please provide your HTML and Vue code aswell please?

didedadob

Here is it, ###index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
  <style type="text/css">
    body {
      padding-top: 40px;
    }
  </style>
</head>

<body>
  <div id="root" class="container">
    <tabs>
      <tab name="About Us" :selected="true">
        <h1>Here is the content for the about us tab.</h1>
      </tab>
      <tab name="About Our Culture">
        <h1>Here is the content for the about our culture tab.</h1>
      </tab>
      <tab name="About Our Vision">
        <h1>Here is the content for the about our vision tab.</h1>
      </tab>
    </tabs>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
  <script src="component03.js"></script>

</body>

</html>

###component03.js

Vue.component('tabs', {
    template: `
    <div>
        <div class="tabs">
            <ul>
                <li class="is-active"><a>Pictures</a></li>
                <li><a>Music</a></li>
                <li><a>Videos</a></li>
                <li><a>Documents</a></li>
            </ul>
        </div>

        <div class="tabs-details"><slot></slot></div>
    </div>
`
});

Vue.component('tab', {
    template: `
    <div><slot></slot></div>
    `,

    props: {
        name: {
            required: true
        }
    }
});

var app = new Vue({
    el: '#root',

});
Tomi
Tomi
1 month ago (5,670 XP)

In the Lession #11 vm$0 is the Tabs. On your Picture i can see that vm$0 is "Tab"

add this to your "tabs" component to see the children:

mounted() {
    console.log(this);
}

Please sign in or create an account to participate in this conversation.