使用 bootstrap-vue 对 b-table 中的 b-input 进行 Vue 数据绑定

Question

我正在尝试将数据绑定到 b 表中的 b 输入，但是，对输入值的更改不会传播到表中的项目。

到目前为止，这是我的代码：

    <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>

基本上我想要的只是每次更改 b 输入的相应值时更改 items 的值。 但是items永远不会改变...

我在这里做错了什么？

Answer 1

解决方法是直接使用物品，而不是使用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>