CODEWITHSUNDEEP
vue.jsvuejs2vue-component
senty
senty

Reputation: 12847

Generating select options with v-for using an object

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?

Upvotes: 4

Views: 35129

Answers (1)

Bert
Bert

Reputation: 82449

This is primarily a guess at what you want, but you could build your options using a computed property.

console.clear()


new Vue({
  el:"#app",
  data:{
    clients: {
      1: {
        first_name:"John",
        last_name:"Doe",
        middle_name:"A"
      },
      2: {
        first_name:"Jenny",
        last_name:"Doe"
      },
    },
    selectedClient: null
  },
  computed:{
    options(){
      return Object.keys(this.clients).map(k => {
        let o = this.clients[k]
        return `${o.first_name} ${o.middle_name ? o.middle_name : ''} ${o.last_name}`
      })
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
   <select v-model="selectedClient">
     <option v-for="option in options" :value="option">{{option}}</option>
   </select>
  <hr>
  Selected: {{selectedClient}}
</div>

Upvotes: 15

Related Questions