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

【问题标题】：V-model with boostrap-vue b-table带有 bootstrap-vue b-table 的 V 模型
【发布时间】：2020-08-14 00:53:38
【问题描述】：

我正在尝试通过在 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 作为字符串“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": '$0.00','fieldName':income},
            { "Category":'Rent', "Your Amount": '$0.00','fieldName':rent},
          ]
        }
}

关于如何让它发挥作用的任何提示，或关于实现我目标的不同/更好方法的建议？

【问题讨论】：

您想根据条件将:items 传递给b-table？
不完全是，我试图为类别数组中的每个项目设置v-model = fieldName。所以在这种情况下.. 将有两个输入字段 1 带有 v-model=income，另一个带有 v-model = rent
所以你想将一个数组传递给v-model，这是两个数组的连接？他们的名字是 store in fieldName property?
no not an array..fieldName 属性表示在 computed..内具有 get/set 的对象。
我明白了，现在你想在fieldName 上设置 v-model 吗？

标签： javascript vue.js bootstrap-vue

【解决方案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;
    }
  }
};

【讨论】：

认为这可能是最好的解决方案，但我认为您的代码中有一些小错误。 fieldName 属性值应该是一个字符串。我认为您的意思是调用方法 getValue 而不是 setValue （因为它返回值）。并且您可能在两种方法中将“property”拼错为“propery”。
@Hiws fieldName 是我的代码的复制和粘贴。但是，这是我尝试将它作为对象和字符串传递的东西。看起来 BeHappy 保持原样。但是，是的，它们必须是字符串。所以..{"fieldName":"income"} 还有..$event.target.value 抛出no value property 错误。只需要通过$event。即使这有效。我想知道为什么 v-model 不起作用。
这是因为您不能在数据中引用计算属性或数据属性。（因为那时都不存在）。即使你移动它在mounted 钩子中启动你的类别，你也不能传递对计算属性的引用，你只能传递值。

【解决方案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": '$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)
        },
   },
}

【讨论】：