javascript - Bootstrap 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>
问题在于第一列和 qvalue 绑定,当我添加多个值时:我在两行中有相同的值。我怎样才能有两个不同的值?方法如下:
methods:{
...mapMutations({
change:"cart/changeQuantity",
remove: "cart/removeProduct"
}),
handleQuantityChange(e,line){
if (e.target.value >0){
this.qvalue = e.target.value;
} else {
this.qvalue = 1;
e.target.value = this.qvalue
}
this.change({line,quantity:e.target.value})
},
handleRemove(line){
this.remove(line.item);
}
}
我理解 v-modeling qvalue 不好,但是正确的方法是什么?
解决方案
而不是v-model
你可以使用:value="line.item.quantity"
.
所以你的输入看起来像这样:
<input type="number" class="form-control-sm"
style="width:5em"
:value="line.item.quantity"
v-on:input="handleQuantityChange($event,line.item)"/>
这是有关使用 vuex 处理表单的更多信息。
推荐阅读
- python - 使用 Route Python Django 调用简单函数
- react-native - React Native / react-native-reanimated-bottom-sheet / 如何更改工作表后面视图的背景颜色?
- vue.js - 在vue js v-for中循环遍历数组中的对象
- python - 如何在 Selenium Python 中打开一个新的 Chrome 会话?
- django - django prefetch_related 用于实例列表
- vb.net - 推出 .dll 上的 VB.NET 项目应自动注册
- flutter - 颤动中的动画滚动视图
- laravel - Laravel 7 Queue delete() 特定作业
- java - Build.gradle 中的运行时范围编译失败?
- layout - ExtJS 6.0.2 使用 hbox 布局创建具有两个嵌套面板的面板