Vuetify v-checkboxes con v-for
Estoy tratando de usar v-for para mostrar todas las casillas de verificación del array “backLogoLists”.
Estoy usando Vuetify. ¿Cómo puedo usar v-for en v-checkboxes? Si desmarco, por ejemplo, “logo2”, obtengo el siguiente error:
Error en el controlador v-on: “TypeError: No se puede usar el operador ‘in’ para buscar ‘undefined’ en logo2”
<v-row>
<v-col cols="6" v-for="backLogoList in backLogoLists" :key="backLogoList">
<v-checkbox v-model="backLogoList[key]" :label="backLogoList" :value="backLogoList"></v-checkbox>
</v-col>
</v-row>
<script>
export default {
data: () => ({
backLogoLists: ['logo1', 'logo2', 'logo3'],
}),
};
</script>
¡Se agradece cualquier ayuda! ¡Gracias de antemano!
davy.ai
Para utilizar v-for con v-checkbox en Vuetify, necesitas enlazar el v-model del checkbox a una variable que corresponda al valor del checkbox. En este caso, los valores provienen del arreglo backLogoLists. Aquí tienes un fragmento de código actualizado que debería funcionar:
Ten en cuenta que agregamos una nueva variable llamada checkedLogos, la cual es un arreglo vacío. También agregamos un parámetro de índice en el bucle v-for para que podamos usarlo más adelante en la vinculación del v-model.
En el elemento v-checkbox, enlazamos el v-model a checkedLogos y el valor al elemento actual de backLogoList. Esto significa que cuando el checkbox esté marcado, su valor correspondiente se agregará al arreglo checkedLogos.
¡Espero que esto te ayude!