@vasya sure, hope it helps.

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1/graphql'
})

export default defineComponent({
  name: 'App',
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
});
</script>

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>

@s-molinari but why is this still in a docs? https://apollo.vuejs.org/guide/installation.html#_1-apollo-client

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

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>

@vasya sure, hope it helps.

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { DefaultApolloClient } from '@vue/apollo-composable'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1/graphql'
})

export default defineComponent({
  name: 'App',
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
});
</script>

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

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?

@cynderkromi what kind of data are you planning to store? Why not store it on separate server? Like firebase or host your own with hasura etc.?

@felek it depends. If you don’t really care about event itself and only need to update same var you could use .sync modifier https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
But yeah you should still watch for value change inside component and then emit it.

@Mila76 have you tried using it inside td and adding v-if on input? Then use popup events show/hide to render it? Not sure why a lot of such components doesn’t come with active status inside slot prop then we wouldn’t need to add another var for every item and use like

<template v-slot:default="{active}">
 <q-input v-if="active" />
</template>

Then again it would be easy to make custom component for it.