如何使用 Vue.js 在 bootstrap-select 下拉列表中设置默认值
How to set default value in bootstrap-select dropdown with Vue.js
这是下拉菜单 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>
我正在尝试设置从数据库中获取的默认值
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);
}
},
我例子中的this.selectedItem.properties.condition
是“2”。在调试器中检查并证明。尽管如此,下拉菜单不受影响并显示 "Option 1".
您可以通过 v-model 将 select
标签与所需的选项值绑定,这里是一个示例:
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>
所以在你的例子中你可以做
<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">
这是下拉菜单 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>
我正在尝试设置从数据库中获取的默认值
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);
}
},
我例子中的this.selectedItem.properties.condition
是“2”。在调试器中检查并证明。尽管如此,下拉菜单不受影响并显示 "Option 1".
您可以通过 v-model 将 select
标签与所需的选项值绑定,这里是一个示例:
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>
所以在你的例子中你可以做
<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">