从您提供的代码来看,报错是因为您在data中定义了两个相同的属性名`totalInvestment`,导致后面的属性覆盖了前面的属性。请确保每个属性名在data中是唯一的,修改您的代码如下:

data() {
  return {
    formData:{
      totalInvestment: {
        applyValue: 1,
        approvedValue: 1,
        adjustment: 1,
      },
      constructionScale: {
        applyValue: 1,
        approvedValue: 1,
        adjustment: 1,
      },
      // 修改这里的属性名
      otherTotalInvestment: {
        applyValue: 1,
        approvedValue: 1,
        adjustment: 1,
      },
    },
  }
}

然后在模板中也将属性名修改为otherTotalInvestment

<el-col :span="12">
  <div class="card-inner">
    <div class="item-header">
      <p class="card-inner-title">总投资(万)元</p>
    </div>
    <div class="item-info">
      <div class="item">
        <p class="other-num">{{ formData.otherTotalInvestment.applyValue }}</p>
        <p>申请值</p>
      </div>
      <div class="item">
        <p class="other-num">
          {{ formData.otherTotalInvestment.approvedValue }}
        </p>
        <p>核定值</p>
      </div>
      <div class="item">
        <p class="other-num">{{ formData.otherTotalInvestment.adjustment }}</p>
        <p>调整</p>
      </div>
    </div>
  </div>
</el-col>

这样就能正确访问到otherTotalInvestment属性中的数据了。

Vue.js项目中解决'TypeError: Cannot read properties of undefined (reading 'applyValue')'错误

原文地址: https://www.cveoy.top/t/topic/quLM 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录