记一次 Vue 关于对象取属性值报错

昨天写Vue前端代码，卡在了一个点上，取对象值，是存在的，但是存对象的属性值，一直undefined的。为此苦恼很久。

结果是因为，属性写错了，写错的点是，后端mock的数据对象，在Vue mounted中请求后端数据传递到前端的。在后台传入的mock数据，误写为如下形式，多了“：”分号

"name:":value

导致前端取对象属性name，data.name 取不到值，当时还信心满满认为肯定是Vue组件周期导致的取不到属性值，网上搜索半天，压根没考虑到是属性名字写错的这个最简单的原因

然后反应过来，哭笑不得，恨不得拍断大腿

然后，继续编写vue前端代码，蓝后，又卡住了，哎呀，咋又取不到对象属性值呢？情形是这样的，

 
 div v-for="(val,k,ind) in resp_data" :key="ind" >
      <ShowMonitoritems :title="check_titles[k]" :show-data="val" :ref="k"/>
     </div>

ShowMonitoritems 是子组件，结合v-for使用，取子组件中属性。this.$refs 是一个list，是每个组件组成的。

 for(let x in this.$refs){
              console.log("x:",this.$refs[x].checked)
}

注意 for(x in data) x是属性名，需要使用[]来取值

以上方式取每个子组件内的checked值是undefined

最后发现，this.$refs[x]每个组件的ref结构是一个list，所有组件属性放在list的index=0下面，所以需要这样使用

this.$refs[x][0].checked

总结：取不到属性值？需要仔细检查下是不是属性名写错，还需要观察对象结构是不是如所想