Replace object in element using vue js or jquery

Question

I have component in which i am looping through object array using v-for

<div v-for="item in goods" class="ui fluid card" :key="item.id" :id="item.id">
      <div v-for="badge in item.badges" :key="badge.id" class="ui labels">
        <a
          class="ui label"
          :style="{ backgroundColor: '#'+ badge.color, color: '#fff'}"
        >{{badge.label}}</a>
      </div>
       <button @click="replacement(item) "class="circular ui icon yellow button replacement">
          <div>
            <span style="font-size:25px">
              <strong v-if="item.related_goods!=null">{{item.related_goods.length}}</strong>
              <strong v-else>0</strong>
            </span>
            <span style="padding:1px">
              <small style="font-size:12px;">Replacement</small>
            </span>
          </div>
        </button>
        <button @click="complement(item) class="circular ui icon red button complementary">
          <div>
            <span style="font-size:25px">
              <strong v-if="item.alternative_goods!=null">{{item.alternative_goods.length}}</strong>
              <strong v-else>0</strong>
            </span>
            <span>
              <small style="font-size:12px">Complement</small>
            </span>
          </div>
        </button>

I am looping through goods to get single items in the same div i have 2 buttons replacement and complement after pressing i am getting the item object as it is.But i want to replace item object or pass new value to item. I have fetched complementary and replacement object in the method. How can i replace item object using vue or even using jquery as last resort.(i only posted short div here as item object have lots of fields)

Please let me know any solution i am new to vue.js. Let me know if you need any extra info

Answer 1

in vue direct array assigment e.g. a[i]=value does not get detected by vue.

Vue provide array mutation methods to change value in array which will promp refresh of dom

In your example use slice method

see Doc

Answer 2

use the splice method

vm.item.splice(indexOfItem, 1, newValue)

item is array indexOfItem is the starting index. 1 is the amount to be deleted. newValue is a value to be inserted.

using the mutation method vue can detect changed into the array and update dom accordingly.