Vue.js Vuejs-数据未显示在阵列中-无错误

我有下面的代码，我使用两个组件，一个叫做小胡子，另一个叫做小胡子

我正在尝试使用

v-for

我没有得到任何数据或任何错误，源代码中显示了小胡子html，但没有小胡子数据

HTML

<div id="app">
    <moustaches>
        <moustache name="The Burgundy" img="/img/the-burgundy.jpg"></moustache>
        <moustache name="The Borat" img="/img/the-borat.jpg"></moustache>
        <moustache name="The Santana" img="/img/the-santana.jpg"></moustache>
    </moustaches>
</div>

<div><ul class="list-inline"></ul></div>

JS

    Vue.component('moustaches', {
    template: `
        <div>
            <ul class="list-inline">
                <li v-for="moustache in moustaches">
                    <p>
                        <strong>@{{ moustache.name }}</strong>
                    </p>
                    <img width="300" height="200" :src="moustache.img">
                    <button 
                        class="btn btn-primary" 
                        :data-type="moustache.name"
                        >
                            Vote
                    </button>
                </li>
            </ul>
        </div>
    `,

    mounted() {
        console.log(this.$children);
    },

    data() {
        return { moustaches: [] };
    },

    created() {
        this.moustaches = this.$children;
      }
});

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

    props: {
        name: { required: true },
        img: { required: true},
        selected: { default: false }
    }

});

new Vue({
    el: '#app'
});

Vue.component（'moustaches'{
模板：`



@{{moustache.name}

投票


`,
安装的（）{
console.log（这是$children）；
},
数据（）{
返回{小胡子：[]}；
},
创建（）{
this.moustaches=this.$children；
}
});
Vue.component（‘胡须’{
模板：`
`,
道具：{
名称：{必需：true}，
img:{required:true}，
所选：{默认值：false}
}
});
新Vue({
el:“#应用程序”
});

呈现的HTML

<div id="app">
    <moustaches>
        <moustache name="The Burgundy" img="/img/the-burgundy.jpg"></moustache>
        <moustache name="The Borat" img="/img/the-borat.jpg"></moustache>
        <moustache name="The Santana" img="/img/the-santana.jpg"></moustache>
    </moustaches>
</div>

<div><ul class="list-inline"></ul></div>

我不是100%了解您想要实现的目标，但我认为您误解了插槽的工作原理

槽

元素允许您将内容分发到组件中。下面是一个小例子：

Vue.component（'child-component'{
模板：“#子组件”
});
新Vue({
el:“#应用程序”，
数据：{消息：'您好，我已经开槽了'}
});

{{message}}
在插槽上方

槽下

我不是100%了解您想要实现的目标，但我认为您误解了插槽的工作原理

槽

元素允许您将内容分发到组件中。下面是一个小例子：

Vue.component（'child-component'{
模板：“#子组件”
});
新Vue({
el:“#应用程序”，
数据：{消息：'您好，我已经开槽了'}
});

{{message}}
在插槽上方

槽下

上面的海报很友好地回答了这个问题，比我能回答的要好得多，但TL:DR的答案是我在胡须部分中缺少

---

我只是把它添加到收尾div下面，效果很好。

上面的海报比我能回答的好得多，但是TL:DR的答案是我在胡须组件中缺少

---

我刚刚在结束div下面添加了它，它起了作用。

感谢所有信息：）我将尝试更新到解决方案2，这看起来是一种处理一切的更简单的方法。感谢所有信息：）我将尝试更新到解决方案2，这看起来是一种处理一切的更简单的方法。