Vue-tables-2: Multiple child rows displayed

[sylvaincaillot]

Just tried using a similar approach as https://jsfiddle.net/matfish2/jfa5t4sm/ on a v-server-table using also a template for edit/delete buttons as below:

    <v-server-table ref="tableList" url="" :columns="columns" :options="options">
      <template  slot="child_row" slot-scope="props">
        {{props.row.recordId}}
      </template>
      <template slot="tools" scope="props">
        <div>
          <el-button size="mini" type="info" icon="ti-pencil" @click="editRecord(props.row.recordId)"></el-button>
          <el-button size="mini" type="warning" icon="ti-trash" @click="deleteRecord(props.row.recordId, props.index)"></el-button>
        </div>
      </template>
    </v-server-table>

However when I click on the '+' for one specific row, all the child rows are shown while I was expecting to see only the child row of the clicked row.

What am i doing wrong?

S.

[matfish2]

When using the childRow option you must pass a unqiue id property for each row, which is used to track the current state. If your identifer key is not id, use the uniqueKey option to set it.

So in your case:

{
    unqiueKey:'recordId'
}

[bGuom]

Where the fk should I add the uniqueKey ? In your a ? Please be specific. Give an example at a least.

[waaronking]

For anyone else who runs across this, the proper key name isuniqueKey not unqiueKey as mentioned above. Also, just add it to your vue-tables-2 options object:

options: {
  ...
  uniqueKey: "recordId"
  ...
}

And obviously replace recordId with whatever unique identifier key you use in your table data.

More details about child rows