No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    2
    4
    452
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kernelconf last edited by

      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
      
      1 Reply Last reply Reply Quote 0
      • K
        kernelconf last edited by

        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 1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @kernelconf last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • K
            kernelconf last edited by

            @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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post