嵌套v-for仅显示Vue中第一个元素的最后一个子元素

Awsirkis

我正在尝试使用Vue通过Bootstrap网格对齐来设置基本网站，因为我听说这两个都是Web开发中的常用工具。

这种特殊的设置利用嵌套项目数组为每一行和每一列打印出不同的样式和颜色。无论我按顺序排列哪一个，当前的形式仅呈现第一行的最后一列。

这是我当前的HTML：

    <div id="grid">
        <template v-for="item in items">
            <div class="row" v-for="col in item.object.columns">
                <div :class="`${col.object.cl}`" v-bind:style="{'background-color': `${col.object.style}`}">{{col.object.text}}</div>
            </div>

        </template>
    </div>

这是我的JavaScript的一部分

var grid = new Vue({
            el: "#grid",
            data: {
                //rows 
                items: [
                    {
                        //row object
                        object: {
                            //columns
                            columns: [
                                //column object
                                {
                                    object: {
                                        text: 'red auto',
                                        style: 'red',
                                        cl: 'col'
                                    },
                                    object: {
                                        text: 'blue auto',
                                        style: 'blue',
                                        cl: 'col'
                                    },
                                    object: {
                                        text: 'green auto',
                                        style: 'green',
                                        cl: 'col'
                                    },
                                    object: {
                                        text: 'yellow auto',
                                        style: 'yellow',
                                        cl: 'col'
                                    }

                                }
                            ]
                        }
                    }
// More below this...
                ]
            }
        })

我的预期结果（来自提供的部分）：

<div id="grid">
    <div class="row">
        <div class="col" style="background-color: red">red auto</div>
        <div class="col" style="background-color: blue">blue auto</div>
        <div class="col" style="background-color: green">green auto</div>
        <div class="col" style="background-color: yellow">yellow auto</div>
    </div>
</div>

而我实际上得到的是：

<div id="grid">
    <div class="row">
        <div class="col" style="background-color: yellow">yellow auto</div>
    </div>
</div>

阿卜杜里拉·艾萨尼（Abdelillah Aissani）

您遇到的问题是v-for="col in item.object.columns"仅返回一个元素，因为您columns实际上仅包含一个填充有无效数据的对象（一个对象不能具有多个具有相同键的值，最后一个键将保留而其他键将被覆盖）..只需删除在object钥匙和使用正常的对象，而不是！

var grid = new Vue({
  el: "#grid",
  data: {
    items: [{
      object: {
        columns: [{
            text: 'red auto',
            style: 'red',
            cl: 'col'
          },
          {
            text: 'blue auto',
            style: 'blue',
            cl: 'col'
          },
          {
            text: 'green auto',
            style: 'green',
            cl: 'col'
          },
          {
            text: 'yellow auto',
            style: 'yellow',
            cl: 'col'
          }
        ]
      }
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="grid">
  <template v-for="item in items">
            <div class="row" v-for="col in item.object.columns">
                <div :class="`${col.cl}`" v-bind:style="{'background-color': `${col.style}`}">{{col.text}}</div>
            </div>
        </template>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。