Vue.js：打开更多选项的复选框列表

我在一个文件中有一些JSON数据，格式如下：

[
    {
        "component": "events",
        "events": [
            "group_event",
            "close"
        ]
    },
    {
        "component": "heading",
        "events": [
            "action",
            "card_load",
            "card_new",
            "card_access",
            "logout",
            "reset",
            "list",
            "owndata",
            "status"
        ]
    }
]

我想找到一种方法，使用Vue

在复选框旁边列出每个组件

单击一个复选框后，将显示相关事件，每个事件都位于一个复选框旁边

到目前为止，我有这样的想法：

<table>
    <tr v-for="c in get_all_components()">
        <td><input :value="c.component" :name="c.component" type="checkbox" v-model="checkedBoxes">{{c.component}}</input></td>
    </tr>
</table>

{{c.component}}

当我尝试列出事件时，Vue会不断抛出有关“undefined”变量“c”（在

元素中）的错误消息

目标是管理创建所有选定组件及其所有选定事件的对象

以下是两个要可视化的屏幕截图：

如果有人能帮助我，那将是一个巨大的帮助

---

谢谢

您的第一个错误是像调用函数一样调用

get\u all\u components（）

。 您必须这样称呼它

get\u all\u components

下面是一个如何实现目标的示例

 <div>
      <div v-for="c in all_components">
        <div><input type="checkbox" v-model="c.component.isChecked">{{c.component.value}}</input>
            <div v-if="c.component.isChecked">
                <div v-for="event in c.events">{{event}}</div>
            </div>
        </div>
    </div>
</div>

通过这种方式，您可以管理名为

isChecked

的属性中的true/false，如果值为true，则呈现事件列表。

---

祝你好运

您的第一个错误是像函数一样调用

get\u all\u components（）

。 您必须这样称呼它

get\u all\u components

下面是一个如何实现目标的示例

 <div>
      <div v-for="c in all_components">
        <div><input type="checkbox" v-model="c.component.isChecked">{{c.component.value}}</input>
            <div v-if="c.component.isChecked">
                <div v-for="event in c.events">{{event}}</div>
            </div>
        </div>
    </div>
</div>

通过这种方式，您可以管理名为

isChecked

的属性中的true/false，如果值为true，则呈现事件列表。

---

祝你好运

谢谢你的回答。我会尝试解决这个问题，谢谢你花时间写这么好的答案！谢谢你的回答。我会尝试解决这个问题，谢谢你花时间写这么好的答案！