Question

我有以下代码，我使用两个组件，一个名为 Mustaches ，另一个名为 Mustache

我正在尝试使用v-for

在胡须中显示来自胡子的数据

我没有收到任何数据或任何错误， Mustaches html显示在源代码中，但未显示 Mustache 数据。

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>

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'
});

呈现HTML

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

Answer 1

我不是100％你想要完成的事情，但我认为你误解了插槽是如何工作的。

槽

Vue.component('child-component', { template: '#child-component' }); new Vue({ el: '#app', data: { message: 'Hello I have been slotted' } });元素允许您将内容分发到组件中。这是一个小例子：

＆＃13;

<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>

＆＃13;

moustaches

＆＃13;

基本上，组件标签之间的任何html都会被放入插槽中。您可以阅读有关广告位in the documentation here的更多信息。

问题

你试图将三个胡子组件插入胡须，但是胡子没有插槽。

另外，你已经给了胡子组件插槽，但没有插入任何东西。

解决方案＃1

向moustache组件添加一个插槽。由于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' });组件是空div，因此它们不会显示在页面上。这是一个有效的代码片段：

＆＃13;

<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>

＆＃13;

moustache

＆＃13;

我不推荐这种方法，因为您只使用插槽传递数据。插槽应该用于传递html，而不是数据。这是一种奇怪的做事方式，你可能会遇到其他错误。

解决方案＃2

您应该通过props传递数据，而不是使用插槽传递数据。通过将数据移出html进入父组件，我们可以完全摆脱所有插槽和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" }, ] } });组件：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

上面的海报比我更好地回答了这个问题，但TL：DR回答是我在胡须组件中遗漏了<slot></slot>。

我刚刚将它添加到结束div之下并且有效。

Vuejs - 数据未显示在数组中 - 没有错误

2 个答案:

槽

问题

解决方案＃1

解决方案＃2