Is there a more efficient way to show/hide elements based on a multiple select in Vue.js? I am currently using methods, but I'm wondering if computed properties could be a better approach. If so, how can this be done?
Here is a sample code sandbox for reference:
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"
/>
My current solution using methods:
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)
return field ? true : false;
}
}