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

If I understood you correctly, you could simply update the goods array and the changes should be immediately reflected in the view. — Yom T.
– Yom T., Commented Dec 12, 2018 at 11:30

tony19 · Accepted Answer · 2022-07-15 20:58:44Z

4

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

edited Jul 15, 2022 at 20:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 5, 2019 at 10:49

Aniket Tandale

415 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

r.kale · Accepted Answer · 2019-11-05 11:01:24Z

3

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.

answered Nov 5, 2019 at 11:01

r.kale

462 bronze badges

Collectives™ on Stack Overflow

Replace object in element using vue js or jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related