Wie man Elemente im Dropdown mit vselect in vue js

Question

rendere Ich habe ein Formular in vue js mit ausgewählten Dropdowns, ich versuche https://sagalbot.github.io/vue-select/ diese Bibliothek zu verwenden, um dies auszuführen, nach der Dokumentation ich muss Übergeben Sie ein Array in dieses und ich rufe eine Axios-Methode, um die Optionen der Dropdowns zu erhalten. Ich erhalte die Daten in folgendem Format:

Und mit folgenden Beschreibung:

ich nur die Namen in der Option zeigen will und bekommen Werte wie Identifikation davon bestimmte Zeile, wie kann ich das erreichen.

Mein Code in etwa so aussehen: https://jsfiddle.net/eemdjLex/1/

<div id="app"> 
    <v-select multiple :options="model.data"></v-select> 
</div> 

import vSelect from 'vue-select'; 

Vue.component('v-select', vSelect) 

const app = new Vue({ 
    el: '#app' 
    router: router, 
    data() { 
     return { 
      model: {}, 
      columns: {}, 
     } 
    } 
    methods: { 
     fetchIndexData() { 
       var vm = this; 
       axios.get('/companies').then(response => { 
       Vue.set(vm.$data, 'model', response.data.model) 
       Vue.set(vm.$data, 'columns', response.data.columns) 
      } 
    } 
}); 

Es ist nicht richtig funktioniert, aber Sie bekommen die Idee, was zu tun ich versuche.

Answer 1

v-select erscheint die gesamte zurück Option als der Wert bei der Verwendung von v-model, so könnte ich hier ein Paar von berechneten Werten verwenden.

new Vue({ 
    el:"#app", 
    data:{ 
    serverData, 
    selected: null 
    }, 
    computed:{ 
    // serverData is a stand in for your model.data. 
    // map over that to build your options 
    selectOptions(){ 
     return this.serverData.map(d => ({label: d.name, value: d.id})) 
    }, 
    // selectedOption is just a short computed to get the id value 
    // from whatever option was selected. You could also just use 
    // "selected.id" in whatever needs the id instead if needed. 
    selectedOption(){ 
     if (this.selected) 
     return this.selected.value 
     else 
     return null 
    } 
    } 
}) 

Example.

Answer 2

Die offizielle select docs kann Ihnen helfen,

Ihre v-select-Komponente wie

new Vue({ 
    template: ` 
    <select v-model="selected"> 
     <option v-for="option in options" v-bind:value="option.value"> 
     {{ option.text }} 
     </option> 
    </select> 
    <span>Selected: {{ selected }}</span>`, 
    el: 'v-select', 
    props: [ 'options' ] 
    data: { 
    selected: '' 
    } 
}) 

Answer 3

am README auf der GitHub Seite für vue-select Suche aussehen sollte, ich sehe, dass Sie weitergeben können die <v-select> Komponente eine options Eigenschaft als ein Array von Objekten mit label und value Schlüssel.

würde ich eine berechnete Eigenschaft machen Ihre model.data zu nehmen und es auf diese Weise zu formatieren:

computed: { 
    options() { 
    let data = this.model.data; 
    let options = []; 

    // do whatever you need to do to format the data to look like this object: 
    // options = [{ label: 'foo', value: 1 }, { label: 'bar', value: 2 }] 

    return options; 
    } 
} 

Dann diese berechnete Eigenschaft übergeben an die <v-select> statt:

<v-select multiple :options="options"></v-select>