I have a table of data where each row contains a select. As a baseline, this works like I expect:
<template>
<tr>
<td class="row">
<q-select v-model="row.OpDef_Id" :options="choices" />
</td>
</tr>
</template>
<script>
export default {
name: 'status-post-ops-row',
props: {
row: {required: true, type: Object},
choices: {required: true, type: Array}
}
}
</script>
But this does not:
<template>
<tr>
<td class="row">
<q-select v-model="proxy" :options="choices" />
</td>
</tr>
</template>
<script>
export default {
name: 'status-post-ops-row',
props: {
row: {required: true, type: Object},
choices: {required: true, type: Array}
},
computed: {
proxy: {
get () {
return this.row.OpDef_Id
},
set (v) {
this.row.OpDef_Id = v
}
}
}
}
</script>
Now there are other ways to accomplish my goal and they might be better. But I’m wondering if the above should work and the failure is a bug, or if it’s not expected to work (and why)?
What happens in the second example is that proxy
's set
method is called and the data updated, but get
is not called and the display of the q-select
does not update. Any reload causes the display to update with the correct label–confirming that set
did the correct thing.
In the first example, if I look at events, q-select
emits an input
then the popover emits a hide
. In the second, that also happens, then q-select
additionally emits a change
. Both input
events and the change
event have the value of the choice.
I’ve tried adding emit of input
, change
, and even both to the set
but that made no difference.