如何在 vue js 中使用 vselect 在下拉列表中渲染元素 [英] How to render elements in drop down using vselect in vue js

问题描述

我在 vue js 中有一个带有选择下拉列表的表单，我正在尝试使用

并附有以下说明:

我只想显示选项中的名称并获取值作为该特定行的 ID，我该如何实现这一点.

我的代码如下所示:https://jsfiddle.net/eemdjLex/1/

<v-select multiple :options="model.data"></v-select>
从 'vue-select' 导入 vSelect；Vue.component('v-select', vSelect)const app = new Vue({el: '#app'路由器:路由器，数据 () {返回 {模型: {}，列: {}，}}方法: {fetchIndexData() {var vm = 这个；axios.get('/companies').then(response => {Vue.set(vm.$data, 'model', response.data.model)Vue.set(vm.$data, 'columns', response.data.columns)}}});

它工作不正常，但你知道我想要做什么.

解决方案

v-select 似乎在使用 v-model 时返回整个选项作为值，所以我此处可能会使用一对计算值.

new Vue({el:"#app",数据:{服务器数据，选择:空},计算:{//serverData 是你的model.data 的替代品.//映射到它以构建您的选项选择选项(){返回 this.serverData.map(d => ({label: d.name, value: d.id}))},//selectedOption 只是一个简短的计算来获取 id 值//从选择的任何选项.你也可以使用//selected.id"在任何需要id的地方，如果需要的话.选择选项(){如果(this.selected)返回 this.selected.value别的返回空值}}})

示例.

I'm having a form in vue js with select drop downs, I'm trying to use https://sagalbot.github.io/vue-select/ this library to execute this, according to the documentation I've to pass an array into this and I'm calling a axios method to get the options of the drop downs. I'm getting the data in following format:

And with following description:

I want to only show the names in the option and get values as ID of that particular row, how can I achieve this.

My code look something like this: 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)
            }
    }
});

It is not working proper but you get the idea what I'm trying to do.

解决方案

v-select appears to return the entire option as the value when using v-model so I might use a pair of computed values here.

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.

这篇关于如何在 vue js 中使用 vselect 在下拉列表中渲染元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！