场景

项目中有个订单列表,提交订单之后用户可以选择取消订单,既然要取消订单,前端这边就得想办法把这个订单请求后端删除接口,在不刷新订单列表的情况下从前台删除,不刷新列表个人感觉体验更好。

 // 确认取消订单
    confirmOrder(order_id) {
      uni.showLoading({
        title: '加载中',
      })
      xxxApi['cancelOrder']({ order_sn: order_id })
        .then((res) => {
          uni.hideLoading()
          if (res.data.flag === 1) {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
            })
            //for循环 orderList,匹配要取消的订单号order_id,
            // 如果匹配到了,就删除这个order_id
            for (let i = 0; i < this.orderList.length; i++) {
              if (this.orderList[i].order_id == order_id) {
                this.$delete(this.orderList, i)
              }
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },

知识点延伸

1). 上面案例用到了this.$delete删除数组中的某一项;也可以用 array.splice(index, 1)
2). delete和Vue.delete删除数组的区别:

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值,并且通知Vue.js更新视图。

这里我就引用别的博主的例子了(懒)

    var a=[1,2,3,4]
    var b=[1,2,3,4]
    delete a[1]
    console.log(a)  //[1,empty,3,4]
    this.$delete(b,1)
    console.log(b)  //[1,3,4]

3). 根据vue文档说的,vue.delete不仅可以作用于数组也可以是一个对象。
跟vue.delete对应的就是 vue.set
关于this.$set() 的使用案例
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐