生成與選擇的選項V-使用對象

-1

我已經包含在這個結構中的用戶名的對象：生成與選擇的選項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>` 
     } 
    } 
}

實現它的正確方法是什麼？

來源

2017-08-10 senty

什麼是理想的價值，什麼是所需的文本？ – Bert

你的'clients'對象有兩個''1''鍵。後者將覆蓋前者。你也錯過了一堆逗號 – Phil

對不起，它將是第二個'2' – senty

這主要是猜測你想要什麼，但是你可以使用計算屬性來構建你的選項。

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>

來源

2017-08-10 00:58:53 Bert

生成與選擇的選項V-使用對象

回答

相關問題