Vue-tables-2: Two-way binding of an input form inside a Client Table

[singiankay]

Is it possible to bind the value for every rows to an input form, and update the value if the input form value is changed?

<template slot="fg_qty" scope="props">
   <input type="number" v-model.number="props.row.fg_qty" class="form-control">
</template>

I'm trying to do this but the value resets to its initial value if I sort my data by another column.

[matfish2]

See #256, #364, #378

[singiankay]

Okay, so I found a way now by creating an associative array and then assigning its id as array key.

<template slot="fg_qty" scope="props">
   <input type="number" :id="props.row.line_id" v-model.number="fgStockData[props.row.line_id]" class="form-control">
</template>

However, Do you know how can vue determine the changes automatically to the v-model of the input above? I need to click on any input element and move away just for the values to be updated.

This is also true if I made a method attached to a button.

Let's say I have an id of 22 and I fire an event,

generateAllocations() {
    this.fgStockData[22] = 1
},

The value would not update to the input elements with v-models unless a blur event happens to any of those input elements

[singiankay]

Got it.

v-model.number="tabledata[tabledata.findIndex(x => x.line_id == props.row.line_id)].fg_qty"

Do you mind adding this code to the documentation? I think this is the easiest way to reference a v-model to the original dataset.

[LbISS]

Actually, props providing row index, so you could shorten it to:

v-model.number="tabledata[props.index - 1].fg_qty"

That seems to most convinient way to bind edit components in client table. I think it should be in documentation.