Javascript 引导Vue可编辑表列

我有一个表，其中一列存储输入

  <b-table bordered stripped
                         show-empty
                         empty-text="Your cart is empty"
                         class="p-2"
                         :fields="fields"
                         :items="lines">
                    <template slot="quantity" slot-scope="line">
                        <input type="number" class="form-control-sm"
                               style="width:5em"
                               v-model="qvalue"
                               v-on:input="handleQuantityChange($event,line.item)"/>
                    </template>
                    <template slot="product" slot-scope="line">
                        {{line.item.product.name}}
                    </template>
                    <template slot="price" slot-scope="line">
                        {{ line.item.product.price| currency }}
                    </template>
                    <template slot="subtotal" slot-scope="line">
                        {{ (line.item.quantity*line.item.product.price) | currency }}
                    </template>
                    <template slot="remove" slot-scope="line">
                        <b-button size="sm" variant="danger" v-on:click="handleRemove(line)">
                            Remove
                        </b-button>
                    </template>
                </b-table>

---

我知道v-model qvalue不好，但正确的方法是什么？

可以使用

:value=“line.item.quantity”

而不是

v-model

因此，您的输入将如下所示：

<input type="number" class="form-control-sm"
                           style="width:5em"
                           :value="line.item.quantity"
                           v-on:input="handleQuantityChange($event,line.item)"/>

---

有关使用vuex处理表单的详细信息。

您在哪里声明

qvalue

？在Vue组件中还是在Vuex中？请在Vue组件中包含该代码

<input type="number" class="form-control-sm"
                           style="width:5em"
                           :value="line.item.quantity"
                           v-on:input="handleQuantityChange($event,line.item)"/>