Блог

У меня есть 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>
 

И мне пришлось обновить эти элементы dom с помощью функции selectpicker, чтобы заставить bootstrap-select работать в 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' тоже