codesandbox: https://codesandbox.io/s/github/Tapialj/AimJavaUnit6?file=/src/frontend/src/components/AddMovieForm.vue
I'm trying to get an array of selected actors via checkboxes. I'm using a v-model to try to grab the information but I'm running into issues getting everything going. I'm sure there is something I'm just completely missing something and there is a much more efficient way to get this done so if you are able to help me with that then it would be much appreciated.
<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>
I have the data for selectedActors as an array but have tried to change it to a string and that just ends up making all boxes check and uncheck as one. The current method for the @change isn't doing anything currently but will be set up to push an actor object into an array based on the checked boxes. Planning on setting it up like this but I haven't been able to test it out yet because of the checkbox issue
selectActors() {
this.actors.map((actor) => {
if(actor.lastName === this.selectedActors[0] && actor.firstName === this.selectedActors[1]) {
this.movie.selectedActorObjects.push(actor);
console.log(actor);
}
});
},
Any idea as to what is going on? Or maybe some better set up for what I'm attempting to do?
After some time playing and learning more about how v-bind works I was able to rework the code to better suit what I needed and in turn fix the issue. I altered the binded value in the input and binded for in the label to grab the ID instead of the name.
<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>
New to Vue and trying to learn as best as I can with the resources I have.