b-table with input v-model

Hello Everyone!

I’m trying to use 2 way binding with input in b-table, when I’m changing value inside of input, data combined with v-model is not changed it’s read only but I want to change it. Can any body help me?

 <template>
                <b-table :fields="fields" :items="position.cut">
                    <template slot="index" slot-scope="data">
                        {{data.index + 1}}
                    </template>
                    <template slot="count" slot-scope="data">
                            <input
                                class="form-control"
                                type="text"
                                v-model="data.value"


                        />
                    </template>
                </b-table>
            </template>

[mosinve]

hi @zaqpiotr, does this works as expected https://jsfiddle.net/cihkem/rv21gkju/ ?

[tmorehouse]

That is because each character typed updates the underlying table data (which is reactive) which in turn causes the table to re-render. Avoid modifying the table data in place. The input should be modifying a separate variable copy of the item row data. And once editing is complete then update the table row in a single update.

To help minimize re-rendering, set a primary key column in your items array, and instruct b-table to use this column as the rendered tr key (vue key).