v-를 사용하여 개체 사용을 위한 선택 옵션 생성

v-를 사용하여 개체 사용을 위한 선택 옵션 생성

다음 구조에 사용자 이름을 포함하는 개체가 있습니다.

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

옵션으로 선택한 입력으로 루프하고 싶다.

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

여기까지 왔는데 줄을 어떻게 정리해야 할지 모르겠어요.코드를 넣을 공간을 확보할 수 있도록 계산된 속성으로 해석할 수 있는 방법이 없을까요?

이런 걸 쓰면 될 것 같은데 어떻게 해야 할지 모르겠어요.

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>`
        }
    }
 }

그것을 실현하는 적절한 방법은 무엇입니까?

이것은 주로 무엇을 원하는지 추측하는 것이지만 계산된 속성을 사용하여 옵션을 구축할 수 있습니다.

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/vue@2.2.6/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>

언급URL : https://stackoverflow.com/questions/45602733/generating-select-options-with-v-for-using-an-object