vue js에서 vselect를 사용하여 요소를 렌더링하는 방법

Question

일부 드롭 다운이있는 vue js에 양식이 있는데이 라이브러리를 사용하려면 https://sagalbot.github.io/vue-select/이 라이브러리를 사용하려고합니다. 이것에 배열을 건네 주면 액 시어스 메서드를 호출하여 드롭 다운 옵션을 얻을 수 있습니다. 다음의 설명과 함께

을 그리고 : 나는 다음과 같은 형식으로 데이터를 얻고

난 단지 옵션의 이름을 표시하고 그 ID로 값을 얻으려면

특정 행, 어떻게 이것을 달성 할 수 있습니다. 이 같은

내 코드를 보면 뭔가 : 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) 
      } 
    } 
}); 

그것은 제대로 작동하지 않습니다하지만 당신은 내가 할 노력하고있어 아이디어를 얻을.

Answer 1

v-select 전체를 반환 나타납니다

나는 당신의 model.data을 가지고 이런 식의 형식을 계산 된 속성을 만들 것 옵션을 v-model을 사용할 때의 값으로 사용하십시오. 따라서 여기에 계산 된 값 쌍을 사용할 수 있습니다.

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

공식 select docs는 VUE-선택, 당신이 전달할 수 있다는보고 있어요에 대한 GitHub의 페이지에 README 보면 당신은

당신의 V-선택 구성 요소가

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

과 같아야합니다 도움이 될 수 있습니다 <v-select> 구성 요소는 속성을 label 및 value 키가있는 객체 배열로 나타냅니다.

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

그럼 대신 <v-select>이 계산 된 속성을 전달합니다 :

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