Vue data binding for b-input in b-table using bootstrap-vue

Question

I'm trying to bind data to b-input inside a b-table however, changes to the input value will not propagate to the items of the table.

Here is my code so far:

    <template>
        <div :class="`col-${fields.length}`">
            <h6 class="text text-center">{{header}}</h6>
            <b-table
                :items="items"
                :fields="fields"
            >
                <template v-for="field in fields"
                    :slot="field.key" slot-scope="data">
                    <b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.value"
                    ></b-form-input>
                </template>
            </b-table>
        </div>
    </template>

    <script>
    export default {
        props: [ "header", "fields", "items"]
    }
    </script>

Basically all I want, is to change the values of items everytime I change the corresponding value of a b-input. But itemswill never change...

What am I doing wrong here?

muXXmit2X muXXmit2X · Accepted Answer · 2018-10-19T10:03:51

The solution is to use the items directly instead of using the data.value.

    <template v-for="field in fields"
      :slot="field.key" slot-scope="data">
        <b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.item[field.key]"></b-form-input>
    </template>

Vue data binding for b-input in b-table using bootstrap-vue

1 Answers