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

Question

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

如果我直接给 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 作为字符串传递 "income"，目前未定义收入。

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": '[=12=].00','fieldName':income},
            { "Category":'Rent', "Your Amount": '[=12=].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": "[=10=].00", fieldName: income },
        { Category: "Rent", "Your Amount": "[=10=].00", fieldName: rent }
      ]
    };
  },
  methods: {
    getValue(property) {
      return this[property];
    },
    change(property, value) {
      this[property] = value;
    }
  }
};

Answer 2

如果有人感兴趣，我已经有了模糊事件的解决方案。但是希望让 v-model 工作...

<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": '[=11=].00','fieldName':"income"},
                { "Category":'Rent', "Your Amount": '[=11=].00','fieldName':"rent"},
         ],
    },
   methods:{
    blur: function(e){
            console.log(e['srcElement'].name);
            console.log(document.getElementsByName(e['srcElement'].name)[0].value)
        },
   },
}

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

V-model with boostrap-vue b-table

javascript

vue.js

bootstrap-vue