javascript - 如何在vue js中使用vselect渲染下拉列表中的元素

Question

我在 vue js 中有一个带有选择下拉列表的表单，我正在尝试使用 https://sagalbot.github.io/vue-select/这个库来执行这个，根据文档，我必须将一个数组传递给这个库，并且我正在调用 axios 方法来获取下拉菜单的选项。我获取以下格式的数据:

并具有以下描述:

我只想显示选项中的名称并获取值作为该特定行的 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 在使用 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 .