b-form-input 如何在 bootstrap-vue 表格单元格中使用@blur 修改/格式化输入？

Question

我正在尝试使用 bootstrap-vue 构建一个输入字段，用户可以在其中输入任何所需的数字，并且应该将其格式化为 3 位的十进制数字。

这是我到目前为止所得到的。 focusOut-Method 会提醒我想要的值，但我不知道如何用它更新表行中的值，因为它是按值调用的。你有什么想法吗？

<template>
  <div>
    <b-table :items="items" :fields="fields" >
      <template v-slot:cell(price)="row">
          <b-form-input 
            v-model="row.item.price"
            @blur="focusOut($event, row.item.price)"
          />
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      fields: [...],
    };
  },
  computed: {
    items: function () {
      return [{price: 3.9}, {price: 5}, {price: 9.333}];
    },
  },
  methods: {
    focusOut: function (event, value) {
      if (["Arrow", "Backspace", "Shift"].includes(event.key)) {
        this.preventNextIteration = true;
        return;
      }
      if (this.preventNextIteration) {
        this.preventNextIteration = false;
        return;
      }

      value = parseFloat(value.replace(",", ".")).toLocaleString(undefined, {
        minimumFractionDigits: 3,
      });
      alert(value);
    },
  } ....
};
</script>

Answer 1

首先，items 应该是一个简单的数据属性，而不是计算属性（因为您没有进行任何计算），其次，尝试获取行索引和单元格名称（在本例中为 price）然后在方法内部更新给定行索引处的单元格：

   <template v-slot:cell(price)="row">
          <b-form-input 
            v-model="row.item.price"
            @blur="focusOut($event, row.item.price,'price',row.index)"
          />
      </template>

data: function () {
    return {
      fields: [...],
      items:  [{price: 3.9}, {price: 5}, {price: 9.333}]
    };
  },

  methods: {
    focusOut: function (event, value,field,index) {
    ... 
  let _value = parseFloat(value.replace(",", ".")).toLocaleString(undefined, {
        minimumFractionDigits: 3,
      });
 //update the field at the given index
  this.$set(this.items,
              index,
                {...this.items[index],[field]:_value})//field represents price

LIVE DEMO