问答

Vue v-for 循环数组数据时,修改数组中对象没有响应

作者:admin 2021-04-17 我要评论

这是一个简单的加减,一个‘加减’为一个组件,当我把数组传入的时候(数组里面是对象),点击 + or - 理论上来说数据应该会变化(虽然我改变的是传入对象的某个...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png
这是一个简单的加减,一个‘加减’为一个组件,当我把数组传入的时候(数组里面是对象),点击 + or - 理论上来说数据应该会变化(虽然我改变的是传入对象的某个属性)
但实际没有发生变化
根据 Vue 的响应式原理,通过 Object.definePrototpye() 设置 getter() 和 setter() 来实现,而我在控制台打印看到数组里的对象是有 get() 和 set() 方法的,那它的数据应该是响应式的才对啊
为什么它没有发生变化呢?
还有我用的是 vue 2.x版本的

我好像知道为什么错了,我的‘加减’是用的 methods 传入参数(而且传入的是基本数据类型)实现的,在 methods 里面的修改只是修改了值的复制,如果传入的是对象的引用就可以了,或者直接修改成 item.count++

代码如下

<div class="cart" v-if="check">
<goods
      v-for="(item,index) in products"
      :key="index"
      :imageData="item.img"
      :productName="item.name"
      :price="item.price"
      :shop="item.shop"
    >
      <template #checkbox>
        <van-checkbox v-model="checked[index]" style="margin-right: 10px""></van-checkbox>
      </template>
      <template #right-icon>
        <div style="align-self: flex-end; flex: 0"> 
          <!-- failure -->
          <!-- <van-icon name="minus" size="12px" @click.stop = minus(item.count)></van-icon> -->
          <!-- success -->
          <van-icon name="minus" size="12px" @click.stop = "item.count--"></van-icon> -->
          <span @click="numberDialog = !numberDialog">{{ item.count }}</span>
          <van-icon name="plus" size="12px" @click.stop = "add(item.count)"></van-icon>
        </div>
      </template>
</goods>
</div>
created() {
    axios.get("http://localhost:3000/cartData")
    .then(res => {
      res.data.forEach((item) => {
        this.products.push(item);
      })
      this.check = true;
    }).catch(err => {
      console.log(err);
    })
    this.check = false;
  },
  methods: {
    add(number) {
      // failure
      if(number > 0) number++;
      // success1 直接修改 data() 中的数据
      // 此时 number 值是‘被修改’的数组下标
       this.products[number].count++;
      // success2 传入对象引用
      // 此时 number 值是‘被修改’的对象
       number.count += 1;
      return number;
    },
    minus(number) {
      // 同上
      if(number > 0) number--;
      return number;
    }
}
###

提供代码 ,有多种可能啊。

  1. 组件写的有问题,没有触发更新操作。(可以通过看控制台是否更新了来判断)
  2. 组件写的没问题,但是使用了一个对象上没有的key。没有触发更新操作。(这个就通过$set、或者直接操作数组splice一下。)
  3. 组件写的没问题,同时也是一个已有的key。那么就看看是不是通过可监听的方式添加的。(可监听 push、unshift、splice)(不可监听 arr[4] = {}
  4. 如果上面都没问题,那么就看看是不是被冻结了呀。
###

用Vue.$set修改

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器