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

Question

我在使用 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)": 空}

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

[ { "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)": 空}

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

--输出结束--

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

Answer 1

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

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

Iterating through nested objects with v-for?

html

vue.js

v-for