V-model with boostrap-vue b-table

Question

Im trying bind v-model by passing the value inside the items array. But binding doesn't happen correctly.. The ultimate goal here is to use a store..all these values are used across multiple "wizard" components.

If I give v-model a value directly it works. for example v-model="income", however i need it to bind each to different data sources. So i tried to pass it in from the object categories with a property fieldName

<b-table striped hover :items="categories" >
    <template v-slot:cell(Adjustments)="data">
      <textInput
        v-model="data.item.fieldName"
        ></textInput>
     </template>
</b-table>

here i also tried to pass the fieldNames as a string "income", currently income as is isn't defined.

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

Any tips on how to get this to work, or suggestions on a different / better way to achieve my goal?

Answer 1

here is my solution:

use :value instead of using v-model, then using @change or @input to change your data:

<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

If anyone is interested, I already had a solution with blur event. But was hoping to get v-model working...

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