javascript - Filtering a table by using vue multiselect

Question

I'm trying to filter the results of a table by using vue-multiselect. I can see the selected values in the VUE dev tools as a part of multiselect component. How do I use these values to be used in filter() function to get the filtered table results.

Below you can see my JS script implementation and Template multiselect implementation as well.

JS Script

export default {
  data: () => ({
    policies: [],
    selectedValues: [],
    options: [],
  }),

  methods: {
    filterByStatus: function({ label, value }) {
    return this.policies.filter(data => {
        let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());
  },

Template

 <multiselect
          v-model="selectedValues"
          :options="options"
          :multiple="true"
          label="label"
          track-by="label"
          placeholder="Filter by status"
          @select="filterByStatus"
        ></multiselect>

score 0 · Accepted Answer

当任何更改或选择时，您可以在 selectedValues 上使用 watch ：

watch:{
selectedValues: function(value){
this.policies.filter(data => {
        let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());

}


}

score 0 · Accepted Answer

您的 select 组件正在使用 prop :multiple="true"，这意味着绑定值selectedValueswithv-model将返回一个策略对象数组。

不要在方法组件选项中使用filterByStatus函数，而是创建两个计算属性。

一个计算所选策略状态的数组，另一个计算要显示的过滤策略数组。

脚本：

computed: {
  selectedStatuses() {
    const statuses = []
    for (const { status } of this.selectedValues) {
      statuses.push(status.toLowerCase())
    }
    return statuses
  },
  filteredPolicies() {
    if (this.selectedStatuses.length === 0) {
      return this.policies
    }
    const policies = []
    for (const policy of this.policies) {
      if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
        policies.push(policy)
      }
    }
    return policies
  }
}

模板：

<multiselect
          v-model="selectedValues"
          :options="options"
          :multiple="true"
          label="label"
          track-by="label"
          placeholder="Filter by status"
        ></multiselect>

例子：

Vue.config.productionTip = Vue.config.devtools = false

new Vue({
  name: 'App',

  components: {
    Multiselect: window.VueMultiselect.default
  },

  data() {
    return {
      policies: [{
        label: 'Policy A',
        status: 'enabled'
      }, {
        label: 'Policy B',
        status: 'disabled'
      }, {
        label: 'Policy C',
        status: 'Deprecated'
      }],
      selectedValues: [],
      options: [{
        label: 'Enabled',
        status: 'enabled'
      }, {
        label: 'Disabled',
        status: 'DISABLED'
      }, {
        label: 'Deprecated',
        status: 'DePrEcAtEd'
      }]
    }
  },

  computed: {
    selectedStatuses() {
      const statuses = []
      for (const {
          status
        } of this.selectedValues) {
        statuses.push(status.toLowerCase())
      }
      return statuses
    },
    filteredPolicies() {
      if (this.selectedStatuses.length === 0) {
        return this.policies
      }
      const policies = []
      for (const policy of this.policies) {
        if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
          policies.push(policy)
        }
      }
      return policies
    }
  },
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <multiselect v-model="selectedValues" :options="options" :multiple="true" label="label" track-by="label" placeholder="Filter by status"></multiselect>
  <pre>Policies: {{ filteredPolicies}}</pre>
</div>

score 0 · Accepted Answer

最好将过滤功能保留在内部computed。

computed:{
      filterByStatus: function ({label, value}) {
          return this.policies.filter((data) => {
              return data.status && data.status.toLowerCase().includes(this.selectedValues.toLowerCase())
          });
      }
}

使用filterByStatus模板部分中的将实时呈现结果。

<div>{{filterByStatus}}</div>

javascript - Filtering a table by using vue multiselect

3 回答 3

Related

Reference