I am trying to get id
values as option value in VueJs when using v-select
. Now, I am getting trouble to get the id
value which will be selected. Would someone help me please to solve this problem?
My index.html
file is -
<!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>
And my vujs script is -
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);
}
}
})
Would you please visit in JSFiddle
for what I am trying to explain! please visit - JsFiddle
Change here:
<v-select name="className" v-model="className" :options="academicClasses.map(academicClass => ({label: academicClass.cname, value: academicClass.id}))"></v-select>
and here:
alert(this.className.label + ' - ' + this.className.value);
Documentation: Dropdown Options
You want to pass an array of object for the options
prop in the following structure:
[{
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.