TypeError: Cannot read property ‘name‘ of undefined

问题解决过程

问题代码:

<div class="c-input-wrapper">
            <div class="c-input-top">
              <label class="c-input-label">
                <span>＊</span>所在领域
              </label>
              <Select class="c-input-60 margin-right-5" v-model="primaryField" placeholder='请选择一级领域' @on-change="projectPrimaryFieldChange">
                <Option v-for="itm in optionFieldArr" :value="itm.value" :key="itm.name">{{ itm.name }}</Option>
              </Select>
              <Select class="c-input-60 margin-right-5" v-model="projectfield" placeholder='请选择二级领域' @on-change="projectfieldChange1">
                <Option v-for="itm in optionSecondaryFieldArr" :value="itm.value" :key="itm.value">{{ itm.name }}</Option>
              </Select>
              <Tag v-for="(item, index) in fieldArr" :key="item.value" :name="item.value" closable @on-close="deleteProjectField(index)">{{ item.name }}</Tag>
            </div>
            <p class="c-input-error">{{projectfieldError}}</p>
          </div>

在使用Vue写页面时出现的问题,排查后发现问题出在optionSecondaryFieldArr这个数组的定义(别问我是怎么知道的,问就是挨个试),下面是修改后的

optionSecondaryFieldArr: [{
        name: '',
        value: ''
      }],

问题解决

总结

规范开发流程

定义对象时初始化
=>从后台获取到数据进行赋值时判断各对象的每个属性书写
=>页面绑定数据时检查书写

可能新出现这个问题的情况:

1. 对象或是数组未初始化
2. 对象引用时打错,例: 将 {{ info.status }} 打成 {{ info.stutus }}