Here is the dropdown HTML
<div class="form-group">
<select class="form-control" id="edit-item_condition">
<option data-tokens="1">Option 1</option>
<option data-tokens="2">Option 2</option>
<option data-tokens="3">Option 3</option>
<option data-tokens="4">Option 4</option>
<option data-tokens="5">Option 5</option>
</select>
</div>
I'm trying to set default value that I fetch from DB
const editItem = new Vue({
el: "#editItem",
data: {
items: null,
selectedItem: null,
},
methods: {
set_dropdown_default(item) {
try {
this.selectedItem = item;
$('.edit-item_condition').selectpicker('val', parseInt(this.selectedItem.properties.condition));
}
catch (err) {
console.log(err);
}
},
The this.selectedItem.properties.condition
in my example is "2". Checked and proved in debugger. Nevertheless, the dropdown is not affected and shows "Option 1".
You can bind the select
tag via v-model with the needed option value, here is an example:
new Vue({ el:"#app", data:{ selected: 4 } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> <div id="app"> <select v-model="selected"> <option value="1">Frist</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select> <p>Selected item: {{selected}}</p> </div>
so in your example you could do
<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">
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.