时间戳

首页 > 解决方案 > 如何过滤一些 vuex 数据以响应选择更改

vue.js - 如何过滤一些 vuex 数据以响应选择更改

问题描述

我是 VueJS 的新手，仍然试图理解所有的结构。我有一个 Vuex 商店，并且在该州有几个数组。在通过计算属性使用 vuex 存储的视图中，我需要在选择更改时从存储中过滤数据。我不明白如何将选择连接到商店中的 officeProjections 数据。

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

标签： vue.jsvuejs2vuex

解决方案

绑定到 select 的模型不能与存储中为数组提供服务的元素相同，在这种情况下，您拥有v-model="workloadLevels"和 `v-for="wl in workflowLevels"。

您将需要一个用于所选值的单独模型：

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"

推荐阅读