q-select with computed property as model
-
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
'sset
method is called and the data updated, butget
is not called and the display of theq-select
does not update. Any reload causes the display to update with the correct label–confirming thatset
did the correct thing.In the first example, if I look at events,
q-select
emits aninput
then the popover emits ahide
. In the second, that also happens, thenq-select
additionally emits achange
. Bothinput
events and thechange
event have the value of the choice.I’ve tried adding emit of
input
,change
, and even both to theset
but that made no difference.