Question

我希望colors数组（现在为十六进制代码）中的内容显示在我创建的模板<color-block>中。

Vue.component('color-block', {
    props: ['hexcolor'],
    template:
    `
    <div class="col-lg-1 col-md-4 col-sm-6 col-xs-12"
    	{{ colors.hex }}
    </div>
    `
});
new Vue({
    el: '#app',
    data: {
    	colors: [
        { color: 'Red', hex: '#FF0000' },
        { color: 'Blue', hex: '#0000FF' }
        ]
    }
})

<script src="https://unpkg.com/vue@2.5.16"></script>
<div id="app">
    <color-block v-for="hex in colors" :colorBlock="hex">
    </color-block>
</div>

https://jsfiddle.net/eywraw8t/168833/

Answer 1

一些问题：

您的演示集:colorBlock="..."，但该道具在组件中实际上命名为hexcolor，因此设置应为:hexcolor="..."
在v-for循环中，hex是一个对象（{color: 'Red', hex: '#FF0000'}），但是我假设您只想传递十六进制颜色代码，因此设置应为{{1} }。
您的:hexcolor="hex.hex"模板在color-block之后缺少右括号
您的class模板引用了color-block，但是colors.hex不是组件的一部分（它是colors数据的一部分）。您可能打算显示组件的属性（app）的值。

演示并进行了更正：

hexcolor

Vue.component('color-block', {
  props: ['hexcolor'],
  template: `
    <div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
      {{ hexcolor }}
    </div>
    `
});

new Vue({
  el: '#app',
  data() {
    return {
      colors: [
        { color: 'Red', hex: '#FF0000' },
        { color: 'Blue', hex: '#0000FF' }
      ]
    };
  }
})

如何显示数组数据？

1 个答案: