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

you have a typo here ` <input :id=letter ` there are no "" around the letter , is this in your code too? — Sherif Hassan
– Sherif Hassan, Commented Jul 18, 2022 at 10:15
Thanks, I have changed that but unfortunately it doesn't fix the problem. — sobmortin354
– sobmortin354, Commented Jul 18, 2022 at 10:25
Could you please post the exact markup you're using? What you posted here is invalid. It might seem like a detail, but a missing or extra " can create havoc in your component and yield unpredictable results. Ideally, you should create a runnable minimal reproducible example. — tao
– tao, Commented Jul 18, 2022 at 10:31
Ok, those quotes have now been added to reflect the change made — sobmortin354
– sobmortin354, Commented Jul 18, 2022 at 11:00

TymoteuszLao · Accepted Answer · 2022-07-18 10:29:06Z

0

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>

answered Jul 18, 2022 at 10:29

TymoteuszLao

9541 gold badge8 silver badges18 bronze badges

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

1 Comment

sobmortin354 Over a year ago

Ok, this change means that clicking the 'b' no longer has any effect. Now, the user will have to select the actual checkbox, which results in the correct outcome. This is acceptable to me as the priority was preventing anything confusing from occurring. Many thanks!

Collectives™ on Stack Overflow

Nested v-for Loop in Vue Selecting Wrong Checkbox

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