El modelo V no permitirá que la casilla de verificación se marque al hacer clic.
Estoy tratando de obtener un array de actores seleccionados a través de casillas de verificación. Estoy utilizando un v-model para intentar obtener la información, pero tengo problemas para hacer todo funcionar. Estoy seguro de que me falta algo completamente y que hay una forma mucho más eficiente de hacer esto, por lo que si puedes ayudarme con eso, sería muy apreciado.
<label for="actor">Actores</label>
<div class="grid check-container">
<div :key="actor.id" class="checkbox" v-for="actor in actors">
<input :key="actor.id"
type="checkbox"
name="actor"
:id="[actor.lastName, actor.firstName]"
:value="[actor.lastName, actor.firstName]"
v-model="selectedActors"
@change="selectActors"
/>
<label :for="[actor.lastName, actor.firstName]">{{ actor.lastName }}, {{ actor.firstName }}</label>
</div>
</div>
Tengo los datos de selectedActors como un array, pero he intentado cambiarlo a una cadena y eso solo hace que todas las casillas se marquen y desmarquen como una. El método actual para @change no está haciendo nada en este momento, pero se configurará para agregar un objeto actor a un array en función de las casillas marcadas. Planeo configurarlo así, pero no he podido probarlo todavía debido al problema con las casillas de verificación.
selectActors() {
this.actors.map((actor) => {
if(actor.lastName === this.selectedActors[0] && actor.firstName === this.selectedActors[1]) {
this.movie.selectedActorObjects.push(actor);
console.log(actor);
}
});
},
¿Alguna idea de qué está sucediendo? ¿O tal vez una mejor configuración para lo que estoy intentando hacer?
davy.ai
El problema con las casillas de verificación que no funcionan correctamente al usar v-model podría deberse a cómo se define y actualiza el array selectedActors. Debería declarar selectedActors como un array vacío y actualizarlo mediante la adición de los valores seleccionados en él, en lugar de volver a definirlo como una cadena.
También puedes simplificar el controlador de eventos @change pasando el objeto del actor directamente al método selectActors en lugar de tratar de hacer coincidir los nombres del array selectedActors.
Esto actualizará el array selectedActors con los objetos del actor seleccionados, que luego podrás recorrer en el método selectActors para agregarlos al objeto de la película.