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

Posted 2023-02-16

【中文标题】使用 Vue.js 以更动态的方式显示复选框

【英文标题】：Display checkboxes in a more dynamic way with Vue.js

【发布时间】：2019-11-12 06:41:05

【问题描述】：

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

我正在使用 axios 以这种格式从谷歌表中获取值：

生成值的脚本：

data() 
    return 
      form: 
        email: "",
        name: "",
        phoneNo: "",
        checked: []
      ,

      sports: [],
      arts: [],
      dance: [],
      show: true
    ;
  ,
  methods: 
    getCcaList() 
      this.axios
        .get(
          "(Google sheet batch get API)"
        )
        .then(response => 
          let cellValues = response.data.valueRanges[0].values;

          // cellValues[0][i] contains values of CCA cell
          // cellValues[1][i] contains values of Category cell
          for (let i = 0; i < cellValues[0].length; i++) 
            if (cellValues[1][i] === "Sports")
              this.sports.push(cellValues[0][i]);
            else if (cellValues[1][i] === "Arts")
              this.arts.push(cellValues[0][i]);
            else if (cellValues[1][i] === "Dance")
              this.dance.push(cellValues[0][i]);
          
        );
    

使用 vue-bootstrap 进行 html 设计：

<label for="sports">Sports:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="sports" :options="sports" stacked buttons></b-form-checkbox-group>
<br />

<label for="dance">Dance:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="dance" :options="dance" stacked buttons></b-form-checkbox-group>
<br />

<label for="arts">Arts:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="arts" :options="arts" stacked buttons></b-form-checkbox-group>

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

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

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

【问题讨论】：

“但是，我无法根据类别显示俱乐部数组中的每个值。”是什么意思。我刚刚尝试过，它对我有用（除非我误解了你想要的）

当我尝试显示俱乐部中的值时，复选框显示为空。我很难弄清楚如何展示它们。非常感谢您的帮助！

【参考方案1】：

您拥有一本字典的想法是正确的，您只需要更改模板即可。我用一个例子创建了一个沙箱：

https://codesandbox.io/s/dynamic-checkboxes-v1puy?fontsize=14&module=%2Fsrc%2FApp.vue

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

 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>

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

【讨论】：

非常感谢！它就像一个魅力。我对 Vue.js 还是很陌生，并且对在具有数组值的对象上使用 v-for 感到困惑，因为像我要使用的对象上没有太多资源。再次非常感谢您！