vue：Cannot read property ‘xxx’ of undefined 出现原因

原因：

vue通过键名获取对象中的值，使用 . 级联显示数据，控制台报如下错误：

代码如下：

<div>
	<span>{{com_List.title}}</span>
</div>

<script>
	export default {
	   data(){
	   		List:[]
	   },
	    computed:{
          com_List:function(){
	          for(var i=0;i < this.List.length;i++){
	            if (this.List[i].id = this.id){
	              return( this.List[i])
	            }
          }
      }
    },
    },
</script>

-------------------------------------------------2020/10/25更新------------------------------------------------------

再一次遇到这个问题，对这个原因也有了更深刻的理解

我在created里初始化了数据，接着我把数据通过computed计算后返回，在页面通过插值表达式使用

通过打印我发现computed执行了两次，第一次是undefined，第二次才被赋值，所以可以知道computed是在created之前执行

第一次执行computed初始化的时候，created还未执行，所以sayObj是空值，计算结果返回undefined
接着created执行并给sayObj赋值，所以computed又执行了一次，这次计算属性才返回正确的值

<p v-if="diaryInfo!= undefined">{{diaryInfo.date}}</p>

  data () {
    return {
      sayObj: [],
    }
  },
  created () {
    this.axios.get('./redeme.json').then((res) => {
      this.sayObj = res.data.data
    })
  },
  computed: {
    diaryInfo: function () {
      return this.sayObj[0]
    }
   }

解决方法1：

判断值是否存在，若不存在则不渲染

<div v-if="com_List">
	<span>{{com_List.title}}</span>
</div>

解决方法2：

先将值初始化为空，这样就不会报未定义（undefined）的错误

data(){
    return {
        List: {
            title: {}
        }
    }
}

解决方法3：

养成良好的判空习惯，可以使用可选链（?.）处理数据

<div v-if="com_List">
	<span>{{com_List?.title}}</span>
</div>

或者，如果返回值为假值（null、undefined、false、0）则返回一个符合预期类型的数据

 diaryInfo: function () {
   return this.sayObj?.[0] || {}
  }