Question

这是下拉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>

我正在尝试设置从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);
                    }
                },

我的示例中的this.selectedItem.properties.condition是“2”。在调试器中检查并证明。然而，下拉列表不受影响，并显示“选项1”。

Answer 1

您可以通过v-model将select标记与所需的选项值绑定，这是一个示例：

＆＃13;

new Vue({
	el:"#app",
  data:{
  	selected: 4
  }
})

＆＃13;

<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>

＆＃13;

所以在你的例子中你可以做到

<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">

Reference

如何使用Vue.js在bootstrap-select下拉列表中设置默认值

1 个答案: