Vue新手的低级错误(一)

问题描述：通过双层v-for，在卡片card中显示某个数组。全部代码如下

<template>
<div>
  <el-row  v-for="i in rowNum" :key="i" >
    <el-col :span="12" v-for="j in 2" :key="i*j" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          {{this.patient_data.length}}
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>
​
<script>
    export default {
        name: "Welcome",
      data(){
          return{
            rowNum:2,
            patient_data:[1,2,3]
          }
      }
    }
</script>
​
<style scoped>
​
</style>

然后开发者工具中一直报错

"TypeError: Cannot read properties of undefined (reading 'patient_data')"

 

一直显示patient_data未定义

然后我发现把数据放到双层v-for之前时

<template>
<div>
  {{this.patient_data.length}}
  <el-row  v-for="i in rowNum" :key="i" >
    <el-col :span="12" v-for="j in 2" :key="i*j" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
         
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

就可以正常显示不报错

后来我发现，多写了个this，把{{this.patient_data.length}}改为{{patient_data.length}}

<template>
<div>
​
  <el-row  v-for="i in rowNum" :key="i" >
    <el-col :span="12" v-for="j in 2" :key="i*j" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          {{patient_data.length}}
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

正常了。

 

标签：显示,Vue,patient,低级,length,报错,新手,data,双层
来源： https://blog.csdn.net/qq_42264735/article/details/120911906