선택 변경에 대한 응답으로 일부 vuex 데이터를 필터링하는 방법

선택 변경에 대한 응답으로 일부 vuex 데이터를 필터링하는 방법

저는 VueJS가 처음이고 아직도 모든 구조를 이해하려고 노력하고 있습니다.저는 Vuex 스토어를 운영하고 있으며 이 스토어에는 주 내에 여러 개의 어레이가 있습니다.계산된 속성을 통해 vuex 저장소를 사용하는 보기에서는 선택 항목이 변경될 때 저장소의 데이터를 필터링해야 합니다.스토어의 사무실 프로젝션 데이터에 선택 항목을 연결하는 방법을 이해할 수 없습니다.

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

선택 항목에 바인딩된 모델은 배열을 제공하는 스토어의 요소와 같을 수 없습니다. 이 경우에는v-model="workloadLevels"및 'v-for="wl in workloadLevels".

선택한 값에 대해 별도의 모델이 필요합니다.

v-model="selectedWorkloadLevel"

그리고 그 속성을 만듭니다.selectedWorkloadLevel당신의Vuex가게.

저는 행동을 취하지 않을 것입니다. 단지 돌연변이일 뿐입니다. 그리고 저는 그것을 일반적으로 만들 것입니다.

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

그런 다음 a를 추가합니다.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"

언급URL : https://stackoverflow.com/questions/55031360/how-to-filter-some-vuex-data-in-response-to-a-select-change