Question

我拥有使用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作为最后的手段来替换项目对象。（我只在这里发布了简短的div，因为item对象有很多字段）

请让我知道我刚接触vue.js的任何解决方案。让我知道您是否需要其他信息

Answer 1

在vue直接数组分配中例如vue不会检测到a [i] = value。

Vue提供了数组更改方法来更改数组中的值，这将促使dom刷新

在您的示例中，使用切片方法

请参阅Doc

Answer 2

使用拼接方法

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

项目是数组 indexOfItem是起始索引。 1是要删除的数量。 newValue是要插入的值。

使用突变方法vue可以检测到更改为数组并相应更新dom。

使用vue js或jquery替换元素中的对象

2 个答案: