Как отфильтровать некоторые данные vuex в ответ на изменение выбора

Question

Я новичок в VueJS и все еще пытаюсь понять все конструкции.У меня есть магазин Vuex, в штате которого есть несколько массивов.В представлении, которое использует хранилище vuex через вычисленное свойство, мне нужно отфильтровать данные из хранилища при изменении выбора.Я не понимаю, как связать выбор с данными officeProjection в магазине.

 <select id="busyness"
                name="busyness"
                class="form-control mt-1"
                v-model="workloadLevels"
                @@change="onWorkloadFilterChange($event)">
            <option v-for="wl in workloadLevels" v-bind:value="wl.id">{{ wl.description }}</option>
        </select>

        <div v-for="op in officeProjections" class="mt-1">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">{{ op.consultantName }}</h3>
                    <p>{{ op.workloadLevel }} <button type="button" v-bind:id="op.ConsultantId" class="btn btn-lg btn-info" data-toggle="popover" data-placement="right" v-bind:data-content="op.comment"></button></p>
                    <p>{{ op.office }}</p>
                </div>
            </div>
        </div>

Answer 1

Модель, привязанная к выбору, не может совпадать с элементом в хранилище, обслуживающем массивы, в этом случае у вас есть v-model="workloadLevels" и `v-for =" wl in workloadLevels ".

YouВам понадобится отдельная модель для выбранного значения:

v-model="selectedWorkloadLevel"

И создайте это свойство selectedWorkloadLevel в вашем Vuex магазине.

Я бы не стал действовать, простомутация, и я бы сделал ее общей:

SET_VALUE: function(state, payload) {
  Object.keys(payload).forEach((key) => {
    if (state.hasOwnProperty.call(key)) {
      state[key] = payload[key]
    }
  })
}

Затем добавьте get и set вычисленное значение для вашего selectedWorkloadLevel:

get selectedWorkloadLevel() {
  return this.$store.getters['selectedWorkloadLevel']
}

set selectedWorkloadLevel(value) {
  this.$store.commit('SET_VALUE', { selectedWorkloadLevel: value })
} 

Затем удалите @change обработчик и обновите свой v-model:

v-model="selectedWorkloadLevel"