javascript - 带有 boostrap-vue b-table 的 V 模型
问题描述
我尝试通过在 items 数组中传递值来绑定 v-model。但是绑定没有正确发生..这里的最终目标是使用商店..所有这些值都用于多个“向导”组件。
如果我直接给 v-model 一个值,它就可以工作。例如v-model="income"
,但是我需要它将每个绑定到不同的数据源。所以我尝试从具有属性 fieldName 的对象类别中传递它
<b-table striped hover :items="categories" >
<template v-slot:cell(Adjustments)="data">
<textInput
v-model="data.item.fieldName"
></textInput>
</template>
</b-table>
在这里,我还尝试将 fieldNames 作为字符串“收入”传递,目前尚未定义收入。
export default {
components:{ textInput },
computed:{
income:{
get(){
return this.incomeTotal
},
set(value){
this.incomeTotal = value
}
},
rent:{
get(){
return this.rentTotal
},
set(value){
this.rentTotal = value
}
}
},
data:function() {
return {
rentTotal:'1.00',
incomeTotal :'4.00',
categories:[
{ "Category":'Income', "Your Amount": '$0.00','fieldName':income},
{ "Category":'Rent', "Your Amount": '$0.00','fieldName':rent},
]
}
}
有关如何使其发挥作用的任何提示,或有关实现目标的不同/更好方法的建议?
解决方案
这是我的解决方案:
使用:value
而不是使用v-model
,然后使用@change
或@input
更改您的数据:
<b-table striped hover :items="categories" >
<template v-slot:cell(Adjustments)="data">
<textInput
:value="getValue(data.item.fieldName)"
@input="change(data.item.fieldName, $event.target.value)"
></textInput>
</template>
</b-table>
export default {
components: { textInput },
computed: {
income() {
return this.incomeTotal;
},
rent() {
return this.rentTotal;
}
},
data: function() {
return {
rentTotal: "1.00",
incomeTotal: "4.00",
categories: [
{ Category: "Income", "Your Amount": "$0.00", fieldName: income },
{ Category: "Rent", "Your Amount": "$0.00", fieldName: rent }
]
};
},
methods: {
getValue(property) {
return this[property];
},
change(property, value) {
this[property] = value;
}
}
};
推荐阅读
- python - 如何根据所有行值为正、一行值为负、两行值为负...和所有行值为负来排列 Pandas 数据框,
- python - Pop() 在函数内部时不返回任何值?
- amazon-web-services - InvalidChangeBatch 400:“”不是有效的托管区域 ID。尝试将 A 记录添加到现有域时不是有效的加密标识符
- python - 根据 Python 中的列值对列进行排序
- javascript - (Node.js) 将 JS 类拆分为模块
- python - 给定相异矩阵,如何在 Python 中执行 PAM 聚类?
- python - 如何在python中分隔单词?
- javascript - 文档样式正在注入注入的弹出窗口
- python - 将变量用作模块调用触发器时遇到问题
- node.js - macOS(10.13.6)npm 安装错误 - 在节点版本 9.8.0 的 fiber@4.0.3 安装脚本中失败