How to get the checkbox value of dynamic v-model that using the checkbox group name in a v-for loop

Question

This situation is one sale product has several option groups,like ice choices,sugar choices etc. The product structure is:

{
                "id": "1000",
                "name": "黑糖波波奶茶",
                "price": 200,
                "image": "xx.png",
                "description": "...",
                 "optionGroups":[
                    {
                        "optionGroupId": "100",
                        "optionGroupName": "Ice Choice | 冰量",
                        "optionDtos":[
                            {
                                "id":"100",
                                "name":"0%"
                            },
                            {
                                "id":"101",
                                "name":"50%"
                            },
                            {
                                "id":"102",
                                "name":"100%"
                            },
                            {
                                "id":"103",
                                "name":"120%"
                            },
                            {
                                "id":"104",
                                "name":"Hot"
                            }
                        ]
                    },
                    {
                        "optionGroupId": "101",
                        "optionGroupName": "Sugar Choice | 糖量",
                        "optionDtos":[
                            {
                                "id":"105",
                                "name":"0%"
                            },
                            {
                                "id":"106",
                                "name":"50%"
                            },
                            {
                                "id":"107",
                                "name":"100%"
                            },
                            {
                                "id":"108",
                                "name":"120%"
                            }
                        ]
                    }
                 ]
            }

And on the detail page of the product, I use v-for to show the option groups. Here is the code:

<form ref="detailForm">

                    <div class="content">
                        <h1 class="name">{{ get_product(product_id)?.name }}</h1>
                        <div class="price">{{ get_product(product_id)?.price }}</div>
                        <div v-for="optionGroup in get_product(product_id).optionGroups"
                            :key="optionGroup.optionGroupId" 
                            class="optionGroup">
                            <fieldset :data-id="optionGroup.optionGroupId">
                                <legend>Choose {{ optionGroup.optionGroupName }}:</legend>

                                <div v-for="option in optionGroup.optionDtos" :key="option.id" class="option_div">
                                    <input type="checkbox" :data-id="option.id" :id="option.id" :name="option.name"
                                         v-model="selectedOption" :value="option.id" :checked="option.default" />
                                    <label :for="option.id">{{ option.name }}</label>
                                </div>


                            </fieldset>
                        </div>

                        <div class="buttons">
                            <button type="button">Check Out</button>
                            <button class="addCart" type="button" @click='addToCart(product_id)'>Add To Cart
                                <span>
                                    <svg class="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 18 20">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M6 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 0h8m-8 0-1-4m9 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-9-4h10l2-7H3m2 7L3 4m0 0-.792-3H1" />
                                    </svg>
                                </span>
                            </button>
                        </div>
                        <div class="description"></div>
                    </div>
                    </form>

I tried use array to accept the value and it works but when I tried to use selectedOption[optionGroup.optionGroupId] as the v-model, it failed.

How can I get the value of each checkbox group ?

I hope that I can get the value of the checkbox groups in data() section, like

data(){
 return  {selectedOption:[]}
}

but if I pass the optionGroup.groupId to the v-model it failed.

Answer 1

I've done it in Composition API, just refactor to Options API

See on VUE SFC Playground

1. You should use the modern Set for options as the data structure (you can convert it to array on saving to the backend later with [...selectedOption])
2. Pass a group for the mutation so you could reset it on a check
3. Next time please create a minimum reproducible example on Vue Playground

const selectedOption = reactive(new Set);

function check(group, id){
  group.optionDtos.forEach(({id}) => selectedOption.delete(id));
  selectedOption.add(id);
}

<input @input="check(optionGroup, option.id)" :checked="selectedOption.has(option.id)" />

Answer 2

I think I get the solution,using the original data to initial the selectedValues object.

<template>
  <div>
    <div v-for="itemGroup in itemGroups" :key="itemGroup.id">
      <div v-for="(item, index) in items" :key="index">
        <input
          type="checkbox"
          :id="'checkbox-' + itemGroup.id + index"
          :value="itemGroup.id + item.value"
          v-model="selectedValues[itemGroup.id]"
        />
        <label :for="'checkbox-' + itemGroup.id + index">{{
          "group" + itemGroup.id + "  " + item.label
        }}</label>
      </div>
    </div>
    <p>Selected Values: {{ selectedValues }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemGroups: [{ id: 0 }, { id: 1 }, { id: 2 }],
      items: [
        { label: "Option 1", value: "opt1" },
        { label: "Option 2", value: "opt2" },
        { label: "Option 3", value: "opt3" },
        // 更多选项...
      ],
      selectedValues: {},
    };
  },
  setup() {},

  mounted() {
    console.log("onMounted");
    this.itemGroups.forEach((element) => {
      let id = element.id;
      this.selectedValues[id] = [];
    });
  },
};
</script>

Answer 3

You can use a radio element and then create a group based on the parent. Also make the selectedOption as ab object.

<input
  type="radio"
  :data-id="option.id"
  :id="option.id"
  :name="optionGroup.optionGroupId"
  v-model="selectedOption[optionGroup.optionGroupId]"
  :value="option.id"
  :checked="option.default"
/>

This will return you the options as selectedOption: { "100": "103", "101": "107" }