时间戳

首页 > 解决方案 > 使用 vue js 或 jquery 替换元素中的对象

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

请让我知道我对 vue.js 不熟悉的任何解决方案。如果您需要任何额外信息，请告诉我

标签： jqueryvuejs2

解决方案

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

Vue 提供数组变异方法来改变数组中的值，这将提示刷新 dom

在您的示例中使用 slice 方法

见文档

推荐阅读