códigos y caja: https://codesandbox.io/s/github/Tapialj/AimJavaUnit6?file=/src/frontend/src/components/AddMovieForm.vue
Estoy tratando de obtener una variedad de actores seleccionados a través de casillas de verificación. Estoy usando un modelo v para tratar de obtener la información, pero tengo problemas para que todo funcione. Estoy seguro de que hay algo que me estoy perdiendo por completo y hay una manera mucho más eficiente de hacerlo, así que si puede ayudarme con eso, se lo agradecería mucho.
<label for="actor">Actors</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 para los actores seleccionados como una matriz, pero he intentado cambiarlos a una cadena y eso termina haciendo que todas las casillas estén marcadas y desmarcadas como una sola. El método actual para @change no está haciendo nada actualmente, pero se configurará para insertar un objeto de actor en una matriz según las casillas marcadas. Planeo configurarlo de esta manera, pero aún no he podido probarlo debido al problema de la casilla 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 lo que está pasando? ¿O tal vez una mejor configuración para lo que estoy tratando de hacer?
Después de un tiempo jugando y aprendiendo más sobre cómo funciona v-bind, pude volver a trabajar en el código para adaptarlo mejor a lo que necesitaba y, a su vez, solucionar el problema. Modifiqué el valor vinculado en la entrada y lo vinculé en la etiqueta para obtener la identificación en lugar del nombre.
<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.id" v-model="selectedActors" @change="selectActors" /> <label :for="actor.id">{{ actor.lastName }}, {{ actor.firstName }}</label> </div>Nuevo en Vue y tratando de aprender lo mejor que puedo con los recursos que tengo.