Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. kernelconf
    K
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 5
    • Best 0
    • Groups 0

    kernelconf

    @kernelconf

    0
    Reputation
    1
    Profile views
    5
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    kernelconf Follow

    Latest posts made by kernelconf

    • RE: Reacting to router param change.

      Thanks for help, I use ts, so I’ve altered @dobbel snipped to

                  watch(() => context.root.$route.params.id, (first, second) => {
                      strategyCode.value = first
                  });
      

      Component uses a new id without any other coding, amazing.

      posted in Help
      K
      kernelconf
    • Reacting to router param change.

      I have a router entry with

      {path: 'strategy/net/:id', component: () => import('../')},
                  {path: 'strategy/manual/:id', component: () => import('../')},
      

      and component pointing to it with

      <q-item clickable v-ripple :inset-level="level/2" :to="router" exact>
      

      where router is variable with entries such as

      /strategy/net/foo1
      /strategy/manual/foo2
      /strategy/manual/bar1
      

      Component is common for all pages (it’s navigation bar)
      If i click on foo2 I go to foo2 page, however I can’t go to bar1 from foo2. The url in browser location bar changes, but component is not updated. I can get to bar1 from foo1 page.
      I looked into vue manual and found this page: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
      Looks like it describes my issue precisely.
      I use composition api and can’t figure out how can I force component to re-run setup() section and fetch data for new id. If would be nice if this behavior can be completely disabled somehow.

      posted in Help
      K
      kernelconf
    • RE: Reactive object points to wrong q-table row if row order changes

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

      posted in Framework
      K
      kernelconf
    • RE: Reactive object points to wrong q-table row if row order changes

      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?

      posted in Framework
      K
      kernelconf
    • Reactive object points to wrong q-table row if row order changes

      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
      
      posted in Framework
      K
      kernelconf