vue 缓存了页面 使用activated 后想把sessionStorage的数据放在data里渲染就报错

Question

vue 缓存了页面 使用activated钩子
把sessionStorage存的数据取出来 放在data里渲染就报错

 <div class="delivery-left">
    <div class="delivery-name" v-if="JSON.stringify(this.orderAddrs) != '[]'">姓名 {{orderAddrs.chnlAddress}}</div>
    <div class="delivery-phone" v-if="JSON.stringify(this.orderAddrs) != '[]'">电话 {{orderAddrs.contactPhone|paybank}}</div>
 </div>
data() {
      return {
        orderAddrs: [],
      }
    },
activated() {
      this.orderAddrs = JSON.parse(sessionStorage.getItem('addrs'));
      console.log(this.orderAddrs)
    },

(2) [{…}, {…}, __ob__: Observer] 是console this.orderAddrs 的数据

Answer 1

问题出现原因是因为数据还没有请求到 vue就已经开始渲染页面了 这时候data里的对象是空的 这就是报错的原因。
解决办法
1.用以上问题姓名举例 v-if=”orderAddrs.chnlAddress“ 当这个字段不为空的时候 才会显示
2.如果请求里取数据是orderAddrs.chnlAddress[0]这样的数据
JSON.parse(JSON.stringify(orderAddrs.chnlAddress[0]))
虽然显得脱裤子放屁，但是确实能解决报错

Answer 2

{{orderAddrs.contactPhone|paybank}} 你这个过滤器有replace方法吧
但是你这个orderAddrs不是一个数组么 不能直接点 所以orderAddrs.contactPhone没有 它执行过滤方法就没有replace

Answer 3

在你的comfireorder.vue文件中定位下replace，然后打印replace前面需要执行该方法的值，看看该属性打印出来的值。
一般出现这种问题，都是因为前面的属性的值是undefined。