CODEWITHSUNDEEP
javascriptvue.jsobject
vuenewb
vuenewb

Reputation: 99

saving changed values to a new object

I have an array of objects and I used v-for to display them. However I want to change few of those items from the array and save only the changed objects in a new object.

template

<b-card-group columns>
    <b-card-body>
      <b-form-group v-for="(value, index) in anotherItems" :key="index" class="form-group">
        <b-form-input v-model="item[value]" class="form-control"></b-form-input>
      </b-form-group>
    </b-card-body>
  </b-card>
</b-card-group>

Methods:

data(){
   return{
     changedValueArray: []
},
methods: {
  justAnotherFunction() {
    const newData = this.items.map((item) => {
      const newItem = {};
      newItem.item_id = item.id;
      return newItem;
    });
  }
}

Upvotes: 0

Views: 659

Answers (1)

Kapcash
Kapcash

Reputation: 6919

You can listen to events on your component, so that you trigger a function everytime your value is updated:

<b-form-input
  v-model="item[value + '_change']"
  class="form-control"
  @changge="(newValue) => addChangedValue(newValue, item.id)">
</b-form-input>

...
data() {
  return {
    changedValues: new Map()
  }
},
methods: {
  addChangedValue(newValue, itemId) {
     // itemId is a uniq key, so you wont have duplicates
     this.changedValues.set(itemId, newValue)
  }
}

Upvotes: 1

Related Questions