Nested v-for Loop in Vue Selecting Wrong Checkbox

Question

I have a nested loop in a vue component. The first loop is to create four dropdown boxes, the second loop is to create three options within each dropdown box. I have attached the image to illustrate. They work correctly in that if I select the checkbox for any of the options within any dropdown box then the correct outcome occurs. The problem is that if I click the word next to the checkbox then always the corresponding option in the first dropdown box is selected, which is not acceptable. So, if I click the checkbox next to 3b then everything is fine; if I click the 'b' next to the checkbox (which is likely for a user to do), then 1b will be selected.

How can I make clicking the 'b' in this case select 3b instead of 1b?

template code

<b-list-group v-for="number in  numbers" v-bind="number">
    <b-button v-b-toggle=number class="m-1 flood-button">{{ number }} </b-button>
    <b-collapse :id="number">
        <b-card>
            <b-list-group>
                <b-list-group-item v-for="letter in letters" v-bind="letter" class="list-group-item">
                    <label :for=letter>
                        <input :id="letter" type="checkbox" @change="toggleLayerVisibility({
                            'floodType': ft,
                            'risk': $event.target.id,
                            'display': $event.target.checked
                        })">
                        {{ letter }}
                    </label>
                </b-list-group-item>
            </b-list-group>
        </b-card>
    </b-collapse>
</b-list-group>

component data

 data () {
        return {
            letters: ["a", "b", "c"],
            numbers: ["1", "2", "3", "4"]
        }
}

screenshot

Answer 1

It happens because the input id was the same for all inputs with the same letter, so 1b and 3b have the same id. Try to modify the id attribute, e.g. add a number to differentiate ids.

new Vue({
  el: '#app',
  data() {
    return {
      letters: ["a", "b", "c"],
      numbers: ["1", "2", "3", "4"]
    }
  },
  methods: {
    toggleLayerVisibility() {},
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
<div id="app">
  <b-list-group v-for="number in  numbers" v-bind="number">
    <b-button v-b-toggle=number class="m-1 flood-button">{{ number }} </b-button>
    <b-collapse :id=number>
      <b-card>
        <b-list-group>
          <b-list-group-item v-for="letter in letters" v-bind="letter" class="list-group-item">
            <label :for="letter + number">
                        <input :id="letter + number" type="checkbox" @change="toggleLayerVisibility({
                            'floodType': ft,
                            'risk': $event.target.id,
                            'display': $event.target.checked
                        })">
                        {{ letter }}
                    </label>
          </b-list-group-item>
        </b-list-group>
      </b-card>
    </b-collapse>
  </b-list-group>

</div>