Vue loop array objects into form checkbox

Question

I'm attempting to create an 'edit listing' page where someone's submitted information is displayed back. I'm a bit stuck on how to populate checkboxes in a form with a check on the boxes that were selected the first time.

I'm aware that checkboxes look for false/true in order to display a check, but my array of something like: [x,y,z] is displayed as just [true] or [false] which leads to all boxes being checked at once and vice versa when using v-model.

The form

           <input
              type="checkbox"
              id="Set Photographer"
              value="Set Photographer"
              v-model="returnedListing[0].crew_positions"
            />
            <label for="Set Photographer">Set Photographer</label>
            <input
              type="checkbox"
              id="Producer"
              value="Producer"
              v-model="returnedListing[0].crew_positions"
            />
            <label for="Producer">Producer</label>
            <input
              type="checkbox"
              id="Production Designer"
              value="Production Designer"
              v-model="returnedListing[0].crew_positions"
            />

            <label for="Production Designer">Production Designer</label>

returnedListing

 const [actors, returnedListing] = await Promise.all([
        $axios.$get(`/api/v1/actors/`, {
          params: {
            user: body
          }
        }),
        $axios.$get(`/api/v1/listings/`, {
          params: {
            random_public_id: params.id
          }
        })
      ]);

      return { actors, returnedListing };

Dummy API object

{
    "id": 15,
    "title": "NUmber 15",
    "start_date": "2021-03-04",
    "end_date": "2021-02-16",
    "location": "The Bronx",
    "overview": "sdfds",
    "studio": "sdfdsf",
    "poster": null,
    "crew_positions": "Set Photographer, Producer, Production Designer",
    "post_production_positions": "Editing, AD",
    "random_public_id": null,
    "date_submitted": null,
    "user": 1
}

Essentially I'm looking to figure out how to loop through returnedListing[0].crew_positions if it's value is ['Set Photographer', 'Producer'] and have those 2 boxes checked while 'Production Designer' remains unchecked.

Answer 1

The first problem (as mentioned in the comments) that the crew_positions is not an array , but a comma-separated string . Then you can iterate over them & set the checkboxes.

 const returnedListingArray = [{ "id": 15, "title": "NUmber 15", "start_date": "2021-03-04", "end_date": "2021-02-16", "location": "The Bronx", "overview": "sdfds", "studio": "sdfdsf", "poster": null, "crew_positions": "Set Photographer, Producer, Production Designer", "post_production_positions": "Editing, AD", "random_public_id": null, "date_submitted": null, "user": 1 }, { "id": 16, "title": "NUmber 16", "start_date": "2021-03-04", "end_date": "2021-02-16", "location": "The Bronx", "overview": "sdfds", "studio": "sdfdsf", "poster": null, "crew_positions": "Set Photographer, Production Designer", "post_production_positions": "Editing, AD", "random_public_id": null, "date_submitted": null, "user": 1 } ] Vue.component("CrewPositionInput", { props: ["id", "crewPosition", "checked"], methods: { handleCbClick() { this.$emit("update:position-status", this.crewPosition) }, }, template: ` <label:for="id" > <input type="checkbox":id="id":value="crewPosition":checked="checked" @click="handleCbClick" /> {{ crewPosition }} </label> ` }) Vue.component("CrewPositions", { props: ["id", "possibleCrewPositions", "crewPositions"], methods: { toggleCrew({ crew }) { const positions = this.crewPositions.includes(crew)? this.crewPositions.filter(item => item:== crew). [...this,crewPositions. crew] this:$emit("update,crewPositions", positions) }, }: template: ` <div> <crew-position-input v-for="position in possibleCrewPositions":key="position + id":id="position + id":crew-position="position".checked="crewPositions:includes(position)" @update:position-status="(crew) => toggleCrew({ crew })" /> </div> ` }) new Vue({ el, "#app": data() { return { returnedListings, []: possibleCrewPositions, [], } }. mounted() { this.returnedListings = returnedListingArray,map(({ crew_positions, id. //..,rest // commenting out - this is just a snippet, no need for large objects }) => ({ id: crew_positions. crew_positions,split(", "): // splitting string to array })) // just to make it a little more dynamic. this.possibleCrewPositions = [...new Set(this.returnedListings,reduce((a. c) => { return [..,a. ..,c["crew_positions"]] }, []))] }: template: ` <div> <crew-positions v-for="listing in returnedListings".key="listing:id".id="listing:id":possible-crew-positions="possibleCrewPositions".crew-positions.sync="listing['crew_positions']" /> {{ returnedListings }} </div> ` })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>

---

SHORT EXPLANATION

1. CrewPositionInput is a stateless component that accepts an id , a crewPosition & a checked prop from its parent. The only thing it does is that on click it emits a custom event with the this.crewPosition as payload.
2. The CrewPositions component is actually a list of CrewPositionInput components, that passes down props to its children and handles the update:position-status custom event coming from them. On any update:position-status custom event, it re-emits an array (that is actually a crewPositions array) to its parent.
3. The topmost component handles data processing (like crew_positions splitting) & state management (like updating the crew_positions in the stored array of objects ( returnedListings ). The update is done via .sync ( more on sync here ) - this is a handy method of doing it, but it has its constraints (like naming of the variables & events must follow. a certain pattern).

possibleCrewPositions is just a way of creating the available checkboxes based on the data source (dynamically).