Stack Exchange
Checkbox does not work correctly with Bootstrap 5 and Vuejs
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);


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>


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>


@walnut_salami this !

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"
/>


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

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