Display checkboxes in a more dynamic way with Vue.js

Question

I have created a form with category labels and check boxes per category like this:

I am using axios to get the values from google sheet in this format:

Script to generate the values:

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

Is there any way to create the above format without having to create or remove arrays if I decide to add or remove categories in the sheet?

So far I have tried creating a dictionary to store values from google sheet and use v-for to display the category values. However, I'm not able to display each value in the array of club base on their category.

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

What do you mean by "However, I'm not able to display each value in the array of club base on their category.". I just tried it and it worked for me (unless I missunderstood what you want) — Alvaro Ccatamayo
– Alvaro Ccatamayo, Commented Jul 1, 2019 at 15:59
The checkbox display was empty when I tried to display the values in club. I was having a hard time trying to wrap my head on how to display them. Thank you so much for your help! — CuriousPerson
– CuriousPerson, Commented Jul 2, 2019 at 3:08

Alvaro Ccatamayo · Accepted Answer · 2019-07-01 16:17:21Z

1

Your idea of having a dictionary is the correct one imo, you just have to alter the template. I created a sandbox with an example:

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

Basically what you want to do is to take the dictionary

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

And go over it using 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>

That way whenever you add a new category, the template takes care of it.

answered Jul 1, 2019 at 16:17

Alvaro Ccatamayo

3311 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CuriousPerson Over a year ago

Thank you so much! It works like a charm. I'm still quite new to Vue.js and got confused by the use of v-for on object with array values as there was not much resources on objects like the one I'm going for. Once again thank you so much!

Collectives™ on Stack Overflow

Display checkboxes in a more dynamic way with Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related