基于过滤vuejs中的数组动态显示/隐藏元素的最佳方法是什么

Question

我想在 vuejs 中基于多项选择显示/隐藏一些元素，目前，我正在使用方法，我很想知道有没有更好的方法来做到这一点？像计算属性？以及如何做到这一点？

代码沙箱示例：

https://codesandbox.io/s/dynamic-filter-bp72r?file=/src/pages/Index.vue

<q-select
      filled
      outlined
      dense
      multiple
      options-dense
      v-model="groupBy.fields"
      :options="reporterlocationGroupByFileldOptions"
      label="fields"
      emit-value
      map-options
      option-value="value"
      option-label="name"
      color="orange"
    />

<!-- elements to show/hide -->
    <q-select
      v-if="visibleFilter('province')"
      filled
      outlined
      dense
      options-dense
      v-model="filtering.provinceId"
      :options="provinceOptions"
      label="province"
      emit-value
      map-options
      option-value="id"
      option-label="name"
      class="q-my-sm"
      color="red"
    />
    <q-select
      v-if="visibleFilter('city')"
      filled
      outlined
      dense
      options-dense
      v-model="filtering.cityId"
      :options="cityOptions"
      label="city"
      emit-value
      map-options
      option-value="id"
      option-label="name"
      class="q-my-sm"
      color="green"
    />

我目前使用方法的解决方案：

data() {
  return {
    filtering: {
      provinceId: '',
      cityId: ''
    },
    reporterlocationGroupByFileldOptions: [
      { name: 'province', orderByDesc: 'province', value: 'province' },
      { name: 'city', orderByDesc: 'city', value: 'city' }
    ]
  }
},
methods: {
    visibleFilter(filterName) {
      var field = this.groupBy.fields.find(x => x === filterName)
      if (field) return true
      return false
    }
  }

Answer 1

您可以 v-for 覆盖 groupBy 属性中的字段属性，并将您的选项和 v-model 移动到同一对象下：

  filtering: {
    provinceId: {
     value: '',
     option: yourOptions
    },
    cityId: {
     value: '',
     option: yourOptions
    },
    sectionId: {
     value: '',
     option: yourOptions
    },
  },

   <div class="col-xs-12 q-mb-sx" v-for="field in groupBy.fields">
    <q-select
      :key="field"
      filled
      outlined
      dense
      options-dense
      v-model="filtering[field].value"
      :options="filtering[field].option"
      label="green"
      emit-value
      map-options
      option-value="id"
      option-label="name"
      class="q-my-sm"
      color="green"
    />
  </div>

PS 你的代码中有错字，“fileds”而不是“fields”