嵌套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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

从嵌套列表的子列表中提取第一个和最后一个元素

Unmarshal只给了我嵌套在JSON响应中的数组的第一个元素

使用Java中的嵌套循环从第一个输入到最后一个输入的时间表

选择嵌套列表的第一个元素

Python:嵌套列表中的第一个元素

C#htmlagilitypack选择嵌套元素中的第一个标签

选择最后一个嵌套元素

在嵌套数组中查找匹配条件的第一个元素

Vue.js-如何在v-for子组件中获取最后一个子引用

嵌套列表中的第一个元素的总和

如何取消嵌套数据并从SparkR中的数组获取第一个元素?

删除嵌套列表的每个子列表的第一个元素

从所有元素和嵌套元素中选择第一个孩子

从JSON NodeJS中的嵌套数组中提取第一个元素

根据第一个元素组合嵌套列表

:带嵌套元素的第一个孩子

“条件的长度> 1,并且将仅使用第一个元素”在数据框上嵌套“ if else”的警告

如何拆分嵌套列表元素的第一个元素?

猫鼬-如何仅填充每个对象嵌套数组中的第一个元素

D3带有刷涂的堆叠区域-仅显示第一个嵌套元素

从jquery中的多个嵌套子元素中获取第一个可见文本

Elasticsearch获取最后一个嵌套或最近嵌套的元素

laravel array_get多个嵌套元素中的第一个

遍历嵌套集合以找到与条件匹配的第一个子-子-子元素

如何只对第一个嵌套的li申请最后一个孩子?

MongoDB:进行投影以仅返回嵌套到另一个对象的另一个数组中嵌套的数组的第一个元素

如何对嵌套json数组中的第一个元素使用DataContract?

索引数组第一个元素中的VueJS v-for

将嵌套列表的第一个元素绑定到嵌套列表的后续元素