Vuejs -数组中没有显示的数据-没有错误
Vuejs -数组中没有显示的数据-没有错误
提问于 2016-12-06 23:30:50
我有以下代码，我使用两个组件，一个名为Moustaches，另一个称为Moustache
我正试图用一个(一个v-for )来显示络腮胡中的小胡子数据。
我没有得到任何数据或任何错误，胡子 html显示在源代码中，但没有显示Moustache数据。
<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>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'
});呈现的
<div><ul class="list-inline"></ul></div>Stack Overflow用户
回答已采纳
发布于 2016-12-07 00:29:10
我不是你想要完成的100%，但我认为你误解了插槽的工作方式。
插槽
<slot>元素允许您将内容分发到组件中。下面是一个小例子：
Vue.component('child-component', {
template: '#child-component'
});
new Vue({
el: '#app',
data: { message: 'Hello I have been slotted' }
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<child-component>
{{ message }}
</child-component>
</div>
<template id="child-component">
<div>
<p>Above the slot</p>
<slot></slot>
<p>Below the slot</p>
</div>
</template>
本质上，组件标记之间的任何html都会被放入槽中。您可以阅读更多关于插槽在这里的文档中的内容。
问题
您已经尝试将三个胡子组件插入到胡子中，但是胡子没有一个插槽。
此外，您已经给胡子组件插槽，但没有插槽任何东西。
解决方案1
向moustaches组件添加一个槽。因为moustache组件是空的div，所以它们不会出现在页面上。下面是一个工作代码片段：
Vue.component('moustaches', {
template: '#moustaches',
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'
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<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>
<template id="moustaches">
<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>
<slot></slot>
</div>
</template>
我不推荐这种方法，因为您只使用时隙来传递数据。插槽应该用来传递html，而不是数据。这是一种奇怪的做事方式，你很可能会遇到其他的错误。
解决方案2
与其使用插槽传递数据，不如通过道具传递数据。通过将数据从html中移出并放到父组件中，我们可以完全消除所有插槽和moustache组件：
Vue.component('moustaches', {
template: '#moustaches',
props: ['moustaches'],
});
new Vue({
el: '#app',
data: {
moustaches: [
{ name: "The Burgundy", img: "/img/the-burgundy.jpg" },
{ name: "The Borat", img: "/img/the-borat.jpg" },
{ name: "The Santana", img: "/img/the-santana.jpg" },
]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<moustaches :moustaches="moustaches"></moustaches>
</div>
<template id="moustaches">
<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>
</template>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41006851
复制相关文章
相似问题
腾讯云开发者
