V型，带助推器vue b-table

Question

我试图通过在items数组中传递值来绑定v-model。但是绑定没有正确发生。。这里的最终目标是使用商店。。所有这些值都在多个"向导"组件中使用。

如果我直接给v模型一个值，它就起作用了。例如v-model="income"，但是我需要它将每个绑定到不同的数据源。所以我试着用属性字段名称从对象类别中传递它

<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},
]
}
}

关于如何实现这一点，有什么建议吗？或者有什么不同/更好的方法来实现我的目标的建议吗？

Answer 1

这是我的解决方案：

使用: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;
}
}
};

Answer 2

如果有人感兴趣，我已经有了一个模糊事件的解决方案。但我希望v型车能正常工作。。。

<div>
<b-table striped hover :fields="categoriesFields" :items="categories"  thead-class="alert-success  alert">
<template v-slot:cell(Adjustments)="data">
<textInput
@blur="blur"
:value="value(data.item.fieldName)"
:name="data.item.fieldName"
></textInput>
</template>
</b-table>
</div>

export default {
components:{ textInput },
data: function(){
categories:[
{ "Category":'Income', "Your Amount": '$0.00','fieldName':"income"},
{ "Category":'Rent', "Your Amount": '$0.00','fieldName':"rent"},
],
},
methods:{
blur: function(e){
console.log(e['srcElement'].name);
console.log(document.getElementsByName(e['srcElement'].name)[0].value)
},
},
}