V-選擇2不能通過

Question

我使用V-選擇在$ HTTP負載後追加值

/search/tag?keyword= 

我

return $tags->toJson(); (laravel) 

有數據返回但不能附加到v選項中的選項

查看模板

<template> 
    <v-select multiple 
    :debounce="250" 
    :on-search="getOptions" 
    :options="options" 
    placeholder="Search Tag..."> 
     <template slot="option" scope="option" value="option.id"> 
     {{option.name}} 
     </template> 
    </v-select> 
</template> 

Vue腳本

import vSelect from "vue-select" 

    export default { 
    components: {vSelect}, 

    data() { 
     return { 
     options: null 
     } 
    }, 
    methods: { 
     getOptions(search, loading) { 
     loading(true) 
     this.$http.post(base_url+'/search/tag', { 
      keyword: search 
     }).then(resp => { 
      // this.options = JSON.stringify(resp.data); 
      console.log(resp.data); 
      loading(false) 
     }) 
     } 
    } 
    } 

RESP在控制檯

Answer 1

您從API返回的對象沒有一個label財產。您可以通過將v-select作爲屬性添加來自定義label。

<v-select multiple 
    :debounce="250" 
    :on-search="getOptions" 
    :options="options" 
    placeholder="Search Tag..." 
    label="name"> 
</v-select> 

這裏是一個工作example。

Answer 2

因爲你是返回一個對象數組，定義了一個 '標籤' 指定到你的組件定義。

從文檔：

/** 
    * An array of strings or objects to be used as dropdown choices. 
    * If you are using an array of objects, vue-select will look for 
    * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A 
    * custom label key can be set with the `label` prop. 
    * @type {Array} 
    */ 
    options: { 
    type: Array, 
    default() { return [] }, 
    },