TypeError: Cannot read property ‘name‘ of undefined

最新推荐文章于 2024-11-06 09:37:25 发布

对峙绝望

最新推荐文章于 2024-11-06 09:37:25 发布

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏： vue JavaWeb

本文链接：https://blog.youkuaiyun.com/qq_44966769/article/details/115010279

JavaWeb 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文记录了在使用Vue.js框架时遇到的一个关于下拉选项列表数据绑定的问题，并详细描述了解决该问题的过程。主要涉及Vue的数据响应机制及视图更新原理，强调了对象初始化的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题解决过程

问题代码:

<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: ''
      }],

问题解决

总结

规范开发流程

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

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

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