Vue.jsマルチセレクトのデータ

Question

Mounted axios呼び出しでサーバーから返される応答データがあります。

イムは、複数選択で選択したオプションとして、特定の部分を使用するために探して：そう

// ===Component name 
    name: "create_order", 
    // ===Props passed to component 
    props: {}, 
    // ===Components used by this component 
    components: { 
     Datepicker, 
     Multiselect, 
    }, 
    // ====component Data properties 
    data(){ 
     return{ 
      formcreateorder: {}, 

      dateoforder: "", 
      format: 'dd MMMM yyyy', 

      orderconsultant: null, 
      orderconsultantoptions: ['Mr', 'Mrs', 'Miss', 'Ms'], 

      ordertype: null, 
      ordertypeoptions: ['Temp', 'Perm'], 

      orderclient: null, 
      orderclientoptions: [] 

     } 
    }, 
    // ===Code to be executed when Component is mounted 
    mounted() { 
     // Make a ajax request to get data from jobs route 
     axios.get('clients/get').then(response => this.orderclientoptions = response.data); 


    }, 
    // ===Computed properties for the component 
    computed: {}, 
    // ===Component methods 
    methods: { 
    } 

私のフロントエンドが

 <multiselect v-model="orderclient" id="orderclient" name="orderclient" :options="orderclientoptions"></multiselect> 

見て、私の応答がそうであるようにオプション

Vueが見えます

{id: 1, clientname: "Tech Dojo", industry: "Tech", consultant: "Bob", clientstatus: "Lapsed",…} 

私がしたいすべてが、私はいくつかの方法を試してみましたが、右のそれを得るカント

を選択し、私のマルチとして対応してクライアント名を使用している、イムは、あなたが唯一のクライアント名を気にした場合は、

Answer 1

を助けることができることを望んクライアント名の文字列配列への応答の結果をマップします。私はラベルがへの道であると信じて、それが使用するフィールドを知る必要があるオブジェクトの配列を渡された場合、あなたのフロントエンドに `ラベル=「CLIENTNAMEを」`追加

mounted() { 
    axios.get('clients/get') 
     .then(response => 
       this.orderclientoptions = response.data.map(x => x.clientName); 
}