@input 仅在单击按钮时输入新项目

Question

我有一个对象数组，我使用 v-for 来显示它们。 但是，我想更改数组中的一些项目，并仅将更改的对象保存在新对象中。 我已经映射了 justAnotherSaveFunction 中的项目，但它保存了数组中的所有项目，而不仅仅是更改的项目，因此我在<b-form-input>使用了 @input 。 但是由于这个原因，每次击键都会将一个对象推送到数组中。 如何仅在单击保存按钮时将其推送到阵列？

模板

<b-card-group columns>
  <b-card v-for="item in items" :key="item.id" no-body>
    <b-card-header>
      Item {{ item.id }}
    </b-card-header>
    <b-card-body>
      <b-form-group v-for="(value, index) in anotherItems.values" :key="index" class="form-group">
        <span>{{ val }}</span>
        <p>{{ item[val] }}</p>
        <b-form-input v-model="item[value + '_change']" class="form-control" @input="(newValue) => addChangedValue(newValue, item.id)"></b-form-input> //want to keep only the
        changed items from here in the newData const
      </b-form-group>
    </b-card-body>
  </b-card>
</b-card-group>
<b-button variant="primary" @click="justAnotherSaveFunction">
   Save
</b-button>

方法：

data(){
   return{
     item: [
         {
       id: 1
       key: "something"
       val: "somethng"
       val_change: "somethhing"
 },{id: 3
       key: "something2"
       val: "something2"
       val_local: "something2"
 },
],
anotherItems: {
    {
     "name":"Randome name",
     "values":["val"],
   }
  },
  changedValueArray: []
},
methods: {
      addChangedValue(newValue, itemId) {
        this.changedValueArray.push({ id: itemId, value: newValue})
      },
  justAnotherSaveFunction() {
    console.log("objects\n" +JSON.stringify(this.changedValueArray)) //I saw many objects for the same item id here because with every input, a new object was pushed to the array
    const newData = this.items.map((item) => {
      const newItem = {};
      newItem.item_id = item.id;

      this.anotherItems.values.forEach((val) => {
        newItem[val] = item[`${val}_change`];
      });
      return newItem;
    });
  }
}

Answer 1

将每次输入值更改时触发的@input替换为@change ，后者仅在您离开输入时触发（模糊）