0

Presento el siguiente div el cual muestra un input con su label, el problema presenta es que no me deja hacer clic en los checkbox.

Este código es sólo un ejemplo de uso del checkbox de boostrap 5 que estoy usando en 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>

Incluso utilizo el DOM para saber si se esta marcando el checkbox pero este aun no me lo muestra:

const brs = document.getElementById('index');
console.log(brs);
2
  • 1
    Recuerda incluir los estilos css y si estas usando un framework indicar nombre y versión usada.. ;) Commented el 31 ago. 2021 a las 21:24
  • @AndresLinares no estoy utilizando css, uso el ejemplo de boostrap 5, pero el input como el label estoy utilizando vuejs para recorrerlo Commented el 31 ago. 2021 a las 21:32

1 respuesta 1

1

No se pueden tener id atributos que comiencen con un número en HTML (que es lo index será).

:id="index"

La solución llame al: id = "'marcas' + índice", de esa manera si recorre el v-for también declare una variable global llamada "brand_selectd"

que puedo usar en el modelo v: ""

Variables globales:

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

Y el HTML del checkbox quedo

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.