vue 取某个对象的值时提示 Cannot read property '0' of undefined解决

看这张图，浪费了我快半个小时，查看所有数据，打断点，折腾了好久才发现问题所在。MD

页面明明渲染正常，但是这个错误一直存在，重启也是这样。

先说结论：解决办法是渲染时对每层数据进行判断

以下是报错代码：

 

 html代码：

                    <h1>
                      <div
                        class="resume_msg baseBorder resume_notice resume_lang_name"
                        notice-key="msg"
                        for-key="name"
                        for-value="html"
                        contenteditable="true" 
                      >
                        {{resumeList.base[0].name}}
                      </div>
                    </h1>

 下面是resumeList数据：

msg: "查询成功"
resumeContent: {
base: [{name: "龙伟"}, {tel: "176208944"}, {Email: "1762973@qq.com"}, {edu: "shenzhen"}}

下面是js代码：

 data() {
    return {
      resumeList: {},
    };
  },

  watch: {},
  methods: {
    // 获取简历信息
    getResumeInfo() {
      this.axios
        .post("/getResumeInfo", {
          userName: "long" 
        })
        .then(res => {
          if (res.data.status == "0") {
            this.resumeList = res.data.result.resumeContent;

          }
        })
        .catch(err => {});
    }

解决：

一步到位：

直接在html渲染数据的地方加判断v-if="resumeList&&resumeList.base"：

                      <div
                        class="resume_msg baseBorder resume_notice resume_lang_name"
                        notice-key="msg"
                        for-key="name"
                        for-value="html"
                        contenteditable="true" v-if="resumeList&&resumeList.base"
                      >
                        {{resumeList.base[0].name}}
                      </div>

 

 那为什么会这样呢

实际在渲染的时候，在读取对象中的某个属性值时，如果不存在这个属性就会报错。

上面的resumeList的base不存在，那么resumeList.base[0].name就会报错，因为你连这个base的key都不存在。

但是，我不是已经取到了正个对象的值了吗，按理说这个base数组也取到了，实际上渲染的过程是一个异步的过程，开始渲染时

resumeList为空，渲染完成后才拿到数据