Javascript V型带boostrap vue b表

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

如果我直接给v-model一个值，它就会工作。例如

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>

关于如何实现这一目标的任何提示，或者关于实现我的目标的不同/更好的方法的建议？

以下是我的解决方案：

使用

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

导出默认值{
组件：{textInput}，
计算：{
收入（）{
返回这个。incomeTotal；
},
租金（）{
返回此.rentotal；
}
},
数据：函数（）{
返回{
租金总额：“1.00”，
收入：“4.00”，
类别：[
{类别：“收入”，“您的金额”：“$0.00”，字段名：收入}，
{类别：“租金”，“您的金额”：“$0.00”，字段名：租金}
]
};
},
方法：{
getValue（属性）{
归还此[财产]；
},
更改（属性、值）{
此[属性]=值；
}
}
};

如果有人感兴趣，我已经有了一个关于模糊事件的解决方案。但希望能让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>

---

您想根据条件将

：items

传递到

b-table

吗？不完全是，我正在尝试为categories数组中的每个项设置

v-model=fieldName

。所以在这种情况下。。将有两个输入字段，一个是

v-model=income

，另一个是

v-model=rent

，因此您想将一个数组传递给

v-model

，它是两个数组的concat？它们的名称存储在

fieldName

属性中？不，不是数组。

fieldName

属性表示在

中使用get/set计算的对象。我知道了，现在您想在
fieldName
的基础上设置v-model？我认为这可能是最好的解决方案，但我认为代码中有一些小错误。
fieldName
属性值应为字符串。我想您是想调用方法
getValue
，而不是
setValue
（因为它返回值）。您可能在这两个方法中将“property”拼错为“property”。@Hiws
fieldName
是我代码的复制粘贴。但是，我尝试将其作为对象和字符串传递。看起来BeHappy让它保持原样了。但是是的，它们必须是字符串。所以..
{“fieldName”：“income”}
也<代码>$event.target.value

引发无值属性错误。只需传递

$event

。尽管这是可行的。我想知道为什么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)
        },
   },
}