Checkbox does not work correctly with Bootstrap 5 and Vuejs

Question

I present the following div which shows an input with its label, the problem is that it does not let me click on the checkboxes.

This code is just an example of using the boostrap 5 checkbox that I am using in VueJs.

<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;"
    data-simplebar data-simplebar-auto-hide="false">
  <li v-for="(brand, index) in brands" :key="index"
      class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
    <div class="form-check">
      <input @click="handleBrands(brand.id)"
             class="form-check-input"
             type="checkbox"
             value=""
             :id="index"
      >
      <label class="form-check-label widget-filter-item-text" :for="index">
        {{ brand.brand }}
      </label>
    </div>
  </li>
</ul>

I even use the DOM to know if the checkbox is being marked but it still does not show it to me:

 const brs = document.getElementById('index');
    console.log(brs);

Andrés Lopez · Accepted Answer · 2021-09-01 16:01:02Z

correct, call the: id = "'brands' + index", that way if you loop through the v-for also declare a global variable called "brand_selectd"

which I can use in the v-model: ""

What happens now is that when I click the chechk, it marks all of them

<li v-for="(brand, index) in brands" :key="index"
                                    class="list-group-item mb-1">

                                        <input
                                            class="form-check-input me-1"
                                            type="checkbox"
                                            v-model="brand_selected"
                                            :value="brand.id"
                                            :id=" 'brands_' + index"
                                        >
                                        <label class="form-check-label widget-filter-item-text" :for="'brands_' + index">
                                            {{ brand.brand }}
                                        </label>
                                </li>

bad_coder · Accepted Answer · 2021-09-01 19:00:17Z

1

I made it!

my global variables in the VueJS remained:

data() {
    return {
        brands: [],
        products: [],
        brand: [],
        brand_selected: [],
    }
},

the checkbox like this:

<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;"
                                data-simplebar data-simplebar-auto-hide="false">
                                <li v-for="(brand, index) in brands" :key="index"
                                    class="list-group-item">

                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="brand_selected"
                                            :value="brand.id"
                                            :id=" 'brands_' + index"
                                        >
                                        <label class="form-check-label widget-filter-item-text" :for="'brands_' + index">
                                            {{ brand.brand }}
                                        </label>
                                </li>
                            </ul>

edited Sep 1, 2021 at 19:00

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Sep 1, 2021 at 16:23

Andrés Lopez

235 bronze badges

1 Comment

Andrés Lopez Over a year ago

@walnut_salami this !

user10706046 · Accepted Answer · 2021-09-01 07:16:24Z

0

Your console.log is not working because you have

:id="index"

So the IDs of the checkboxes are "1", "2", "3", "4", not "index".

Your "value" prop on the checkbox is permanently set to false: value="". If you remove that, the checkbox will be toggleable.

<input 
  @click="handleBrands(brand.id)"
  class="form-check-input"
  type="checkbox"
  :id="index"
/>

answered Sep 1, 2021 at 7:16

user10706046

2 Comments

Andrés Lopez Over a year ago

correct, call the: id = "'brands' + index", that way if you loop through the v-for also declare a global variable called "brand_selectd" which I can use in the v-model: "" What happens now is that when I click the chechk, it marks all of them

user10706046 Over a year ago

The value you pass to v-model needs to be an array. codepen.io/threenuc/pen/oNwxdvB?editors=1111

Collectives™ on Stack Overflow

Checkbox does not work correctly with Bootstrap 5 and Vuejs

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related