I have cascading selects, where the options for each subsequent select is dependent on the selects that have been selected before it. Here is an example of the first two (there are like 9 of these things in the full application), where the options for the second select are sourced by a computed property that uses the selected value of the first select. Works great!
<template lang="pug">
.q-gutter-md
q-select(v-model="model.a", :options="computedOptionsA", emit-value, map-options)
q-select(v-model="model.b", :options="computedOptionsB", emit-value, map-options)
</template>
<script>
export default {
computed: {
computedOptionsA () {
return options.a
},
computedOptionsB () {
const result = options.b.filter(o => matchFilterKey(o.filterKey, this.model, 1))
if(result.length === 1) { this.model.b = result[0].value} // <- this smells!
return result
}
}
}
</script>
However, one of the things I would like to do, is automatically select the option if there is only a single option to be selected. The commented line in computedOptionsB works just fine, but it discouraged since it introduces a computed method side effect.
Is there a better way to do this?
If I could detect that the options changed, I imagine I could do it there, but the closest I can find is the “add” and “remove” events, but they only seem to respond to the usage of their similarly-named methods.
Thanks in advance for any recommendations!