在vuex中对数组对象合并或添加属性后,在组件中直接调用渲染报错,数组对象显示{__ob__: Observer},解决方法

问题 :

vuex 中的代码

// 提取选择商品框的数据
  simOnSaleList(state) {
    let onSaleList = state.goodsList.onsale_yds_ls;
    // for (let i = 0; i < onSaleList.length; i++) {
    //   onSaleList[i].is_stock = "";
    // }
    let res = onSaleList.map(item => {
      return Object.assign(
        {},
        {
          is_stock: "",
          name: item.name,
          idyun: item.idyun,
          onsale_yd: item.onsale_yd
        }
      );
    });
    // console.log("onSaleList", onSaleList);
    let goodsOptions = [

      {
        is_stock: 0,
        name: "全部商品",
        idyun: "",
        onsale_yd: ""
      },
      {
        is_stock: 1,
        name: "有货商品",
        idyun: "",
        onsale_yd: ""
      },
      {
        is_stock: 2,
        name: "无货商品",
        idyun: "",
        onsale_yd: ""
      },
      {
        is_stock: 3,
        name: "APP上架",
        idyun: "",
        onsale_yd: ""
      },
      {
        is_stock: 4,
        name: "APP下架",
        idyun: "",
        onsale_yd: ""
      },
      ...res
    ];

    // console.log("商品类型", goodsOptions);
    return goodsOptions;
  }

在组件中直接调用渲染报错, map 找不到

在组件中查看该数组对象, 数组对象显示的是 {__ob__: Observer} 格式

解决方法 :

1. 将 vuex 中传过来的数组对象进行深拷贝

2. 组件中用空数组接收数据

3. 并且放入定时器中执行

mounted() {
  this.$nextTick(() => {
    setTimeout(() => {
      this.goodsOptions = JSON.parse(JSON.stringify(this.simOnSaleList));
    }, 500);
  });
},