vue js 또는 jquery를 사용하여 요소의 개체 바꾸기

vue js 또는 jquery를 사용하여 요소의 개체 바꾸기

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>

같은 div에 있는 하나의 아이템을 얻기 위해 상품을 루프하고 있습니다.버튼을 2개 누르면 아이템 오브젝트가 그대로 표시됩니다.그러나 아이템 오브젝트를 바꾸거나 아이템에 새로운 값을 전달하고 싶습니다.메서드에서 보완 개체와 치환 개체를 가져왔습니다.vue를 사용하거나 마지막 수단으로 jquery를 사용하여 아이템 오브젝트를 대체하려면 어떻게 해야 합니까(아이템 오브젝트에는 필드가 많기 때문에 여기에 short div만 게시했습니다).

vue.js를 처음 접하는 솔루션이 있으면 알려주세요.추가 정보가 필요하시면 알려주세요.

vue 직접 어레이 할당(예: a[i]= 값이 vue에서 감지되지 않음)

Vue는 어레이의 값을 변경하는 어레이 변환 메서드를 제공하여 dom의 갱신을 촉진합니다.

예제에서는 슬라이스 방법 사용

「Doc」를 참조해 주세요.

스플라이스법을 사용하다

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

item is array indexOfItem은 시작 인덱스이고 1은 삭제할 양입니다.newValue는 삽입되는 값입니다.

변환 방법을 사용하여 vue는 어레이로 변경된 내용을 감지하고 그에 따라 dom을 업데이트할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53741179/replace-object-in-element-using-vue-js-or-jquery