QTable updated nested column value

[nededa]

Hello,
I’m trying to updated nested column value in QTable. Quasar does allow you to define field property in columns prop as function which computes required value with getter only but how do I update it?

Example

const columns = [
    {
      label: 'Client',
      field: row => row.client.name,
    },
  ]

  <template v-slot:body-cell="props">
    <td>
        <q-input v-model="props.value"/>
    </td>
  </template>

I realise that I can just use v-if and write v-model myself but since I’m using graphql it would be nice to have some function to do it automatically. Maybe I’m missing something and you can do it out of box with quasar?

[dobbel]

@nededa

You’ll have to update the v-model of the Qtable. All the relevant code is not in your snippet.

[nededa]

@dobbel
What do you mean qtable v-model? For non nested columns I can just use props.row[props.col.field] but obviously I can’t do it with nested object. By using props.value just wanted to show parsed value.

[nededa]

If anyone encounters same problem I just ended doing it like this:

const columns = [
    {
      label: 'Client',
      field: row => row.client.name,
      editField: 'client.name',
    },
  ]

    const setRowField = (row, field, newValue) => {
      const keys = field.split('.')
      while (keys.length > 1) {
        row = row[keys.shift()]
      }
      row[keys[0]] = newValue
    }

  <template v-slot:body-cell="props">
    <td>
        <q-input :value="props.value" @input="setRowField(props.row, props.col.editField || props.col.field, $event)"/>
    </td>
  </template>

[metalsadman]

@nededa use q-td ie. <q-td :props="props"><q-input v-model="props.row.client.name"/></q-td>.

[nededa]

@metalsadman yeah I think I weren’t clear enough. I meant updating nested object value dynamically. Basically idea is to wrap q-table in a custom component for easy CRUD.

[metalsadman]

@nededa yeah, don’t know what you’re trying to do with the snippet then, anyway use what’s working for you.