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

Posted 2023-02-23

【中文标题】Vuejs - 数据未显示在数组中 - 没有错误

【英文标题】：Vuejs - Data not showing in array - No errors

【发布时间】：2017-04-21 18:29:08

【问题描述】：

我有以下代码，我使用了两个组件，一个叫做 Moustache，另一个叫做 Moustache

我正在尝试使用 v-for

在

Moustache

中显示来自

Moustache

的数据

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

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

【参考方案1】：

上面的海报比我更好地回答了这个问题，但 TL:DR 的回答是我在 Moustaches 组件中缺少<slot></slot>。

我刚刚将它添加到关闭的 div 下方，它起作用了。

【参考方案2】：

我不是 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 都会被放入插槽中。您可以阅读更多关于插槽的信息in the documentation here。

问题

您尝试将三个 mustache 组件插入到 moustaches 中，但 mustache 没有插槽。

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

解决方案 #1

为moustaches 组件添加一个槽。因为moustache 组件是空的 div，所以它们不会显示在页面上。这是一个工作代码sn-p：

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   :src="moustache.img">
        <button 
                class="btn btn-primary" 
                :data-type="moustache.name"
                >
          Vote
        </button>
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

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

解决方案 #2

您应该通过 props 传递数据，而不是使用插槽来传递数据。通过将数据移出 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   :src="moustache.img">
        <button 
                class="btn btn-primary" 
                :data-type="moustache.name"
                >
          Vote
        </button>
      </li>
    </ul>
  </div>
</template>

【讨论】：

感谢所有信息 :)

我将尝试更新到解决方案 2，它看起来是处理所有事情的更简单方法。