[英]vuejs this.$refs for more than one element
我有4個選擇:
<div class="form-row">
<div class="form-group col-3">
<label for="stateSelect">Status</label>
<select v-model="filterState" @change="search()" data-live-search="true" class="form-control" ref="stateSelect" id="stateSelect">
<option value="">Alle Status</option>
<option v-for="assignmentState in assignmentStates" v-bind:value="assignmentState.state">
{{ assignmentState.state }}
</option>
</select>
</div>
<div class="form-group col-3">
<label for="loadingSelect">Beladungsort</label>
<select v-model="filterLoading" @change="search()" data-live-search="true" class="form-control" ref="loadingSelect" id="loadingSelect">
<option value="">Alle Standorte</option>
<option v-for="location in locations" v-bind:value="location.id">
{{ location.name }}
</option>
</select>
</div>
<div class="form-group col-3">
<label for="unloadingSelect">Entladungsort</label>
<select v-model="filterUnloading" @change="search()" data-live-search="true" class="form-control" ref="unloadingSelect" id="unloadingSelect">
<option value="">Alle Standorte</option>
<option v-for="location in locations" v-bind:value="location.id">
{{ location.name }}
</option>
</select>
</div>
<div class="form-group col-3">
<label for="carrierSelect">Spediteur</label>
<select v-model="filterCarrier" @change="search()" data-live-search="true" class="form-control" ref="carrierSelect" id="carrierSelect">
<option value="">Alle Speditionen</option>
<option v-for="assignmentCarrier in assignmentCarriers" v-bind:value="assignmentCarrier.name">
{{ assignmentCarrier.name }}
</option>
</select>
</div>
</div>
我必須使用選擇器 function 刷新這個 dom 元素,才能在 vuejs 中像這樣進行引導選擇工作:
export default {
name: "AssignmentList",
data() { ....
},
updated() {
$(this.$refs.stateSelect).selectpicker('refresh');
$(this.$refs.loadingSelect).selectpicker('refresh')
$(this.$refs.unloadingSelect).selectpicker('refresh')
$(this.$refs.carrierSelect).selectpicker('refresh')
}
是否可以總結這 4 個.selectpicker('refresh')
語句?
或者是否可以對這些選擇進行分組/標記,以便我可以一次刷新這些元素而無需單獨鍵入每個元素。
只需在constants.js
文件或其他文件中創建一個常量,然后將它們import
到您的組件中。 像這樣的東西:
const refTypes = Object.freeze({
stateSelect: "stateSelect",
loadingSelect: "loadingSelect",
unloadingSelect: "unloadingSelect",
carrierSelect: "carrierSelect"
});
然后在您的組件中有一個您調用的方法,該方法執行以下操作:
Object.values(refTypes).forEach((type) => {
$(this.$refs[type].selectpicker('refresh');
});
我可能也會為'refresh'
做同樣的事情
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.