@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 ，后者僅在您離開輸入時觸發（模糊）