问题描述
我在 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
}
}
})
这篇关于如何在 vue js 中使用 vselect 在下拉列表中渲染元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!