Отображать флажки более динамично с помощью Vue.js

Question

Я создал форму с метками категорий и флажками для каждой из них, например:

Я использую axios для получения значений из Googleлист в этом формате:

Скрипт для генерации значений:

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]);
          }
        });
    }

HTML-дизайн с vue-bootstrap:

<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>

Можно ли создать вышеуказанный формат без необходимости создавать или удалять массивы, если я решу добавить или удалить категории на листе?

До сих пор я пытался создать словарь длясохраняйте значения из листа Google и используйте v-for для отображения значений категории.Однако я не могу отобразить каждое значение в массиве клубных баз по их категории.

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

Answer 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-для

<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>

Таким образом, когда вы добавляете новую категорию, об этом заботится шаблон.