Javascript 使用Vue.js以更动态的方式显示复选框

我创建了一个表单，每个类别都有类别标签和复选框，如下所示：

我使用axios从google工作表中获取以下格式的值：

用于生成值的脚本：

data（）{
返回{
表格：{
电邮：“，
姓名：“，
电话号码：“，
选中：[]
},
体育：[]，
艺术：[]，
舞蹈：[]，
秀：真的
};
},
方法：{
getCcaList（）{
这是axios
.得到(
“（谷歌表单批量获取API）”
)
。然后（响应=>{
让cellValues=response.data.valueRanges[0]。值；
//cellValues[0][i]包含CCA单元格的值
//cellValues[1][i]包含类别单元格的值
for（设i=0；i

使用vue引导的HTML设计：

体育：




舞蹈：




艺术：

如果我决定在工作表中添加或删除类别，是否有任何方法可以创建上述格式而不必创建或删除数组

到目前为止，我已经尝试创建一个字典来存储GoogleSheet中的值，并使用v-for来显示类别值。但是，我无法根据类别显示俱乐部数组中的每个值

[
{类别：“体育”，俱乐部：[“篮球”、“足球”、“射箭”]}，
{类别：“舞蹈”，俱乐部：[“萨尔萨”]}，
{类别：“艺术”，俱乐部：[“绘画”、“唱诗班”、“乐队”、“绘画”]}，
]

在我看来，拥有字典的想法是正确的，您只需更改模板即可。我创建了一个沙盒，其中有一个示例：

基本上你要做的就是拿字典

 categories: [
    { category: "Sports", club: ["Basketball", "Soccer", "Archery"] },
    { category: "Dance", club: ["Salsa"] },
    { category: "Arts", club: ["Painting", "Choir", "Band", "Drawing"] }
  ],

用v-for检查一下

<div v-for="c in categories" :key="c.category">
<label :for="c.category">{{c.category}}:</label>
  <br>
  <b-form-checkbox-group
    :name="c.category"
    v-model="form.checked"
    :options="c.club"
    stacked
    buttons
  ></b-form-checkbox-group>
</div>

{{c.category}}：

---

这样，每当您添加一个新类别时，模板就会处理它。

您所说的“但是，我无法根据其类别显示俱乐部基数组中的每个值”是什么意思。我只是尝试了一下，它对我有效（除非我不理解您想要什么）当我试图在club中显示值时，复选框显示是空的。我很难理解如何显示它们。非常感谢您的帮助！非常感谢！它就像一个符咒。我对Vue.js还是一个新手，并且对在对象上使用v-for和数组值感到困惑，因为没有太多的资源来显示它们n件像我要买的一样的东西。再次感谢你！