如何在 vue 中将 bootstrap select multi 切换为 single

Question

我想更改 toggle multiselect true/false 但不起作用，但不会从 muliple 更改为 single。

<label class="d-flex">
   <input type="checkbox" class="mr-3" v-model="isMultiple"> Multiple select
</label>
<select id="selectid" :multiple="isMultiple" class="selectpicker" data-live-search="true" data-width="100%"
  v-model="selectData">
        <option value=1">Select</option>
        <option value="2">Select</option>
 </select>

我试着观察价值然后运行这个 function

 $("#selectid").selectpicker("destroy").attr("title", "my title").selectpicker("render");

Answer 1

 Vue.config.productionTip = false var app = new Vue({ el: '#app', data: { isMultiple: false } })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="custom-control custom-switch my-4"> <input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="isMultiple"> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label> </div> <pre>{{ isMultiple }}</pre> <select class="custom-select custom-select-sm":multiple="isMultiple"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>