在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签？
Posted
技术标签:
【中文标题】在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签？【英文标题】：How to get `id` value as option value and `cname` as option label when using `v-select` in vuejs? 【发布时间】：2019-06-26 01:17:57 【问题描述】：当使用v-select 时，我正在尝试将id 值作为VueJs 中的选项值。现在，我很难获得将被选中的id 值。有人可以帮我解决这个问题吗？
我的index.html 文件是 -
<!DOCTYPE html>
<html>
<head>
<title>VueJs | Select2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div id="pageContent">
<form method="POST" @submit.prevent="addSection()">
<div class="form-group">
<label for="className">Select Class</label>
<v-select name="className" v-model="className" :options="academicClasses.map((cname) => cname)"></v-select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success save-btn"><i class="fa fa-check"></i> Save</button>
</div>
</form>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
</body>
</html>
而我的 vujs 脚本是 -
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue(
el: '#pageContent',
data:
className: '',
academicClasses: [],
academicClasses: [
id: 1,
cname: 'One'
,
id: 2,
cname: 'Two'
,
id: 3,
cname: 'Three'
,
id: 4,
cname: 'Four'
],
,
methods:
addSection()
alert(this.className);
)
请您访问JSFiddle 了解我要解释的内容！请访问-JsFiddle
【问题讨论】：
【参考方案1】：在此处更改：
<v-select name="className" v-model="className" :options="academicClasses.map(academicClass => (label: academicClass.cname, value: academicClass.id))"></v-select>
这里：
alert(this.className.label + ' - ' + this.className.value);
文档：Dropdown Options
【讨论】：
【参考方案2】：您希望在以下结构中为 options 属性传递一个对象数组：
[
label: item.cname,
value: item.id
]
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue(
el: '#pageContent',
data()
return
className: '',
academicClasses: [
id: 1, cname: 'One',
id: 2, cname: 'Two' ,
id: 3, cname: 'Three' ,
id: 4, cname: 'Four'
],
,
methods:
addSection()
alert(this.className);
,
computed:
opts()
return this.academicClasses.map(item => (
label: item.cname,
value: item.id
));
,
watch:
className(val)
console.log(val);
)
Vue.config.devtools = false;
Vue.config.productionTip = false;<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="pageContent">
<form method="POST" @submit.prevent="addSection()">
<div class="form-group">
<label for="className">Select Class</label>
<v-select name="className" v-model="className" :options="opts"></v-select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success save-btn"><i class="fa fa-check"></i> Save</button>
</div>
</form>
</div>【讨论】：
以上是关于在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签？的主要内容，如果未能解决你的问题，请参考以下文章
Vuejs Vuetify 如何在 v-select 中访问对象的属性
VueJS 和 Vuetify - 用于 v-select 的数组项在数据更新后不刷新
如何在 vue.js 2 中设置 v-select 中选择的选项值？