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

我在使用v-for遍历以下json文件和访问AVGratings.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>

我当前的输出是：

-输出贝金酒店-

[{AVGratings.rating_int:5.3333}]-R1

{AVGratings.rating_int:5.3333}

0-{AVGratings.rating_int:5.3333}

[{AVGratings.rating_int:5.3333}]-R2

{AVGratings.rating_int:5.3333}

0-{AVGratings.rating_int:5.3333}

[{AVGratings.rating_int:null}]-F1

{AVGratings.rating_int:null}

0-{AVGratings.rating_int:null}

[{AVGratings.rating_int:5.3333}]-R3

{AVGratings.rating_int:5.3333}

0-{AVGratings.rating_int:5.3333}

[{AVGratings.rating_int:null}]-F2

{AVGratings.rating_int:null}

0-{AVGratings.rating_int:null}

-输出端-

现在在第二个for循环中，我想通过以下方式访问AVGratings.rating_int属性：

---

{{rating.AVGratings.rating_int}}但是当我尝试时，它停止显示任何内容。理想情况下，我希望在一个循环中完成所有操作，但我不确定这是否可行。

尝试使用括号表示法。 {{rating[AVGratings.rating_int]}