使用vuejs在浏览器控制台中获取每个组件时获取未定义

时间:2017-08-29 08:28:45

标签: javascript console vue.js vuejs2

当我输入此内容时($vm0.$children.forEach(tab => console.log(tab.name));在控制台中未定义 我只是学习vuejs和创建组件。 我的html文件在这里

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.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 About us tab.</h1>
            </tab>
            <tab name="About Our Culture">
                <h1>Here is the content for cukture tab.</h1>
            </tab>
            <tab name="Contact tab">
                <h1>Here is the content for contact us tab</h1>
            </tab>
        </tabs>
    </div>
    <script src="js/11.js"></script>
</body>
</html>

我的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>
`,
mounted() {
    console.log(this.$children);
}
});

Vue.component('tab',{
template: `
    <div><slot></slot></div>
`,
props: {
    name: { required : true }
}
})

new Vue({

el: "#root"

})

1 个答案:

答案 0 :(得分:0)

解决了这个错误

$vm0 is current element in Vue

当我点击Devtools中的一个元素时,它被定义为$ vm0,就像html devtools一样 你可以找到它的属性和方法, 您可以更改属性及其值,如

$vm0.message = "Hello World"