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 · Accepted Answer · 2019-07-24 05:26:30Z

4

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>

edited Jul 24, 2019 at 5:26

answered Oct 19, 2018 at 10:03

muXXmit2X

2,7853 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related