arrays - 从嵌套数组输出复选框

Question

在我的数据中，我有多个项目，每个项目都有一个包含ID和name的嵌套类别数组。前任：

    {
    "id": 5,
    "title": "Title Five",
    "notes": "-",
    "category-data": [
        [
            {
                "cat-id": 2,
                "cat-name": "Category Two"
            }
        ]
    ]
},

如何遍历每个数据项以从类别数据中输出名称以避免重复？

我不确定如何循环和输出嵌套的类别数据项。

编辑：我不得不稍微改变我的数据结构：

    {
    "id": 1,
    "title": "Title one",
    "category_data": {
        "1": "Category One Name",
        "2": "Category Two Name"
    }
},

干杯

标签： arraysjsonvue.jsvuejs2

Answer 1

在我的数据结构得到改进之后，我可以按预期循环遍历它。

 <div v-for="(item, index) in info" :key="index" class="form-check">
    <div v-for="(category, index) in item.category_data" :key="index">
        <input type="checkbox" class="form-check-input" v-model="cat_data" :id="index" :value="index">
        <label class="form-check-label">{{ category }}</label>
    </div>
 </div>