javascript - 带有 bootstrap-vue b-table 的 V 模型

Question

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

如果我直接给 v-model 一个值，它就可以工作。例如 v-model="income" ，但是我需要它将每个绑定(bind)到不同的数据源。所以我尝试从具有属性 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},
          ]
        }
}

有关如何使其发挥作用的任何提示，或有关实现目标的不同/更好方法的建议？

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;
    }
  }
};