CODEWITHSUNDEEP
htmlvue.js
Andrés Lopez
Andrés Lopez

Reputation: 23

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);

Upvotes: 0

Views: 814

Answers (3)

Andr&#233;s Lopez
Andr&#233;s Lopez

Reputation: 23

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>

Upvotes: 1

Andr&#233;s Lopez
Andr&#233;s Lopez

Reputation: 23

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>

Upvotes: 1

user10706046
user10706046

Reputation:

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

Upvotes: 0

Related Questions