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>

使用Bootstrap-Vue在B表中进行B输入的Vue数据绑定

1 个答案: