vue中获取localstorge里的数据，为什么v-for指令渲染不出来，求各位帮我看看

Question

我在login.vue组件里把登录的信息存入了localstorge

登录成功后浏览器里也能获取

但是我在另一个组件personal.vue获取localstorge数据的时候就遇到了问题，代码如下

v-for就是渲染不出来，页面上什么都没有，我在控制台也能打印出数据，

但就是不知道为什么渲染不出来，是我哪里写得不对么？还是说要先保存在login.vue里，然后再传参给personal.vue，不是说localstorge是个全局变量么？第一次用vue写登录功能，很多问题不知道，这个问题也纠结了很久了，求各位大神帮我看看，感激不尽。

Answer 1

1. vue devtools里有没有数据
2. 又没有this的变化，不需要写that = this
3. console.log(getziliaos)输出的是什么(// !应该是console.log(that.getziliaos))

localStorage数据是同源共享的，不需要传。

Answer 2

首先你打印的getziliaos就错了，应该打印this.getziliaos，其次，你v-for渲染的items并没有定义，你应该改成item in getziliaos,你应该在created钩子中去调用这个方法获取数据，不然方法都没调用怎么获取数据。

Answer 3

v-for="item in items" 这个items哪来的
你的数据getziliaos好像不是数组格式不用循环

Answer 4

https://cn.vuejs.org/v2/guide...

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值：

把 data 声明中 getziliaos 属性写出来试试

Answer 5

data () {
    return  {
        getziliaos: JSON.parse(localStorage.getItem(`data`).detail)
    }
}

直接这样写就 ok 啊,多简单!

---

你这方法里面不用缓存 this!

Answer 6

这样写不行的，直接白屏