当使用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
最佳答案
此处更改:
<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);
关于javascript - 在vuejs中使用 `id`时，如何获取 `cname`值作为选项值和 `v-select`作为选项标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54479896/