Error when using v-model with client table on VueJS3 & premium version

[vincent-lu]

• Vue.js version: 0.3.1
• Consumed using: webpack
• FULL error message (including stack trace):

  custom-filters.js?866d:5 Uncaught (in promise) TypeError: Cannot read property 'filter' of undefined
  at module.exports (custom-filters.js?866d:5)
  at Proxy.module.exports (client-search.js?28dd:52)
  at Proxy.module.exports (filtered-data.js?7240:9)
  at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
  at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:861)
  at Object.get [as filteredData] (runtime-core.esm-bundler.js?5c40:5910)
  at Object.get (runtime-core.esm-bundler.js?5c40:6218)
  at Proxy.filteredData (provide.js?b747:43)
  at Proxy.render (RLTableBody.js?81f2:16)
  at renderComponentRoot (runtime-core.esm-bundler.js?5c40:846)

• Relevant code:

  <v-client-table
  v-model="table.data"
  :columns="table.columns"
  :options="table.options"
  />

• Steps for reproducing the issue: Using premium version of vue-tables-3 and VueJS 3, if I load the table with <v-client-table :data="table.data" ...> it works fine, but when I swap :data with v-model (to implement Editable Cells) the table breaks with the above error message.

BTW does Editable Cells feature work on vue-tables-3/vue3?

Many thanks.

[matfish2]

Thank you for reporting this. Due to changes in v-model behavior the syntax required is different:

<v-client-table :columns="columns" :data="data" @input="e=>data=e"></v-client-table>

I have also added it to the breaking changes section on the docs: https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3#breaking-changes

Please also pull the latest (0.3.2) as I have added update and input to the list of emitted events on the client table

[vincent-lu]

Hey thanks @matfish2 making some progress, but still some trouble.

This is my code:

<template>
  <v-client-table
    :data="table.data"
    :columns="table.columns"
    :options="table.options"
    @input="(e) => (table.data = e)"
  >
    <template #[`post.title`]="{ row, update }"> // Had to use this syntax because the column contains dot
      <input
        v-model="row.post.title" // This sets the post.title value to this <input> correctly
        type="text"
        @update:modelValue="update" // This triggers update successfully
      />
    </template>
  </v-client-table>
</template>

<script>
import { reactive } from "vue";

export default {
  const table = reactive({
    data: [
      {
        id: 1,
        name: "John",
        post: {
          title: "Foo bar",
        },
      },

       {
        id: 2,
        name: "Tom",
        post: {
          title: "Hello world",
        },
      },
    ],
    columns: ["id", "name", "post.title"],
    options: {
      editableColumns: ["post.title"],
    },
  });

  return {
    table,
  };
};
</script>

The code above render the table successfully, with the post.title field being rendered as a <input> with correct value.

However, since the row data contains nested object post, when I update the <input> cell, the event value in @input="(e) => (table.data = e)" actually return this json:

{
  "id": 1,
  "name": "John",
  "post": {
    "title": "Foo bar",
  },
  "post.title": "New input"
},

Customising @input="(e) => (table.data = e)" can solve this problem but it doesn't seem ideal, ideally the scoped update function should understand we are trying to update the nested object value.

Let me know what you think @matfish2.

[matfish2]

I have added nested data support on version 0.3.3. Should work now

[vincent-lu]

Thanks @matfish2 confirmed working

[vincent-lu]

Just thought to reopen this to ask about the update event on <v-client-table> @matfish2. Following my previous example code, I added @update="updateTable" to the <v-client-table>, so it becomes the following:

<v-client-table
    :data="table.data"
    :columns="table.columns"
    :options="table.options"
    @input="(e) => (table.data = e)"
    @update="updateTable"
>

My updateTable simply just output the payload from the event, interestingly, I find that the payload is something like this when I type "helloworld" to the <input>:

{
  "column": "post.title",
  "newVal": undefined,
  "oldVal": "helloworld",
  "row": {...}
}

Basically, the newVal is always undefined, and oldVal always show the current typed value.

Perhaps there is something wrong with my configuration, or there is a bug in the updateValue function?

[matfish2]

Fixed in 0.3.4.

[vincent-lu]

Thanks again @matfish2, confirmed fixed.