Reactive object points to wrong q-table row if row order changes

kernelconf

Hello,
this is my first experience with front end developing, so probably I do things completely wrong, but I can’t figure whats wrong, so I’m asking for help.

I have a table with data populated from graphql in one component and update dialog in another.

    <q-table dense flat hide-bottom :columns="orderColumns" :data="row"
             title-class="text-subtitle2 text-bold" :pagination.sync="pagination" row-key="id">
        <template v-slot:body="props">
            <q-tr :props="props" :class="getClassForRow(props.row.state, props.row.satisfiedLots)">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.value }}
                </q-td>
                <q-td auto-width>
                    <ManualStockOrdersMenu :strategy="strategy" :row="props.row"/>
                </q-td>
            </q-tr>
        </template>
    </q-table>

ManualStockOrdersMenu has reactive structure to hold data that can be edited

            const editOrderData = reactive({
                id: props.row.id,
                strategyId: props.strategy,
                input: {
                    type: props.row.type,
                    state: props.row.state,
                    priceStart: props.row.price,
                    lots: props.row.lots,
                    percents: props.row.percents
                }
            })

After update I fully update my table contents with

const {
                mutate: updateOrder,
                onError: onCreateError,
                onDone: onCreateDone,
            } = useMutation(updateManualStockStrategyOrder, {
                variables: editOrderData,
                refetchQueries: [{query: getManualStockStrategyData, variables: {strategyId: props.strategy}}]
            })

Table sorts rows by update time, so after edit, row order changes. If I try to edit the same row, editOrderData data points to row that was in this place before. So, with my code, I can reliably edit only this last row in my table (order doesn’t change in this case).

It is extremely complex to me to provide playground, illustrating the issue, but maybe the issue is obvious?

I tried to throw away editOrderData structure and map dialog directly to props.row, however in this case I have an issue with updateOrder mutation variables: values don’t change at all (however, local edits are reflected on screen).

                variables: {id: props.row.id, strategyId: props.strategy, input: {type: props.row.type, state: props.row.state, priceStart: props.row.price, lots: props.row.lots, percents: props.row.percents}}, <- props.row contains always contain unmodified values

kernelconf

It looks like reactivity is lost even if I simply sort table with click on sortable column, i.e.

in child component

            const editOrderData = reactive({
                id: props.row.id,
                strategyId: props.strategy,
                input: {
                    type: props.row.type,
                    state: props.row.state,
                    priceStart: props.row.price,
                    lots: props.row.lots,
                    percents: props.row.percents
                }
            })

after any sort in parent, editOrderData doesn’t match props.row contents. Can anybody suggest what’s wrong here?

dobbel

@kernelconf

reactivity in Vue.js V2 has some caveats for updating the values in object and arrays. ( reactivity won’t work if done the normal JS way)

https://vuejs.org/v2/guide/reactivity.html

kernelconf

@dobbel You are right, it was reactivity caveat. I was able to mitigate the issue with Object.assign in dialog open function. It rewrites the whole object and changes are picked up. Not sure if this is good, but at least it works for me.