Generating select options with v-for using an object

Viewed 29926

I have an object that contains user names in this structure:

clients: {
   1: {
     first_name:"John"
     last_name:"Doe"
     middle_name:"A"
   },
   2: {
     first_name:"Jenny"
     last_name:"Doe"
   },
}

I want to loop though them in a select input as options

<option v-for="(value, client, index) in clients" :value="">{{ value }}</option>

I came until here, but I couldn't figure out how to organize the string properly. Maybe, is there a way to parse it in computed properties so I can have room to put code?

If I could use something like this, I think it would work, but couldn't figure out how to do it like this either.

computed:{
    clientNameOptions() {
        for (const key of Object.keys(this.clients)) {
            return `<option value="` + this.clients[key].first_name + ' ' + this.clients[key].middle_name + ' ' +
             this.clients[key].last_name + `"></option>`
        }
    }
 }

What is the proper way of achieving it?

1 Answers
Related