使用 v-for 遍历嵌套对象？答案

【问题标题】：Iterating through nested objects with v-for?使用 v-for 遍历嵌套对象？
【发布时间】：2020-04-28 19:43:07
【问题描述】：

我在使用 v-for 遍历以下 json 文件和访问“AVG(ratings.rating_int)”属性时遇到问题。

--json 开始--

ratings {

    "R1":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "R2":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "F1":[
            {"AVG(ratings.rating_int)":null}
         ],

    "R3":[
            {"AVG(ratings.rating_int)":"5.3333"}
         ],

    "F2":[
            {"AVG(ratings.rating_int)":null}
         ]
        }

--json 结束--

我使用的vue-js代码如下：

                        <div v-for="(criteria, index) in ratings">
                            {{criteria}} - {{index}}
                            <div v-for="(rating, index) in criteria">
                                <p>{{rating}}</p>
                                <p>{{index}} - {{rating}}</p>
                            </div>
                        </div>

我目前的输出是：

--输出开始--

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R1

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R2

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": null } ] - F1

{ "AVG(ratings.rating_int)": null }

0 - { "AVG(ratings.rating_int)": null }

[ { "AVG(ratings.rating_int)": "5.3333" } ] - R3

{ "AVG(ratings.rating_int)": "5.3333" }

0 - { "AVG(ratings.rating_int)": "5.3333" }

[ { "AVG(ratings.rating_int)": null } ] - F2

{ "AVG(ratings.rating_int)": null }

0 - { "AVG(ratings.rating_int)": null }

--输出端--

现在在第二个 for 循环中，我想通过以下方式访问“AVG(ratings.rating_int)”属性： {{rating.AVG(ratings.rating_int)}} 但是当我尝试这样做时，它会停止显示任何内容。好吧，理想情况下，我想在一个循环中完成所有这些，但我不确定这是否可能。

【问题讨论】：

标签： html vue.js v-for

【解决方案1】：

尝试使用括号表示法。 {{rating["AVG(ratings.rating_int)"]}}

【讨论】：