vue报错问题记录1-Cannot read property '0' of null

1.场景描述

项目采用element ui组件库，出现这个问题是在表格中套用标签。

<template>
    .....
    <el-table-column
        prop="blogTags"
        label="标签"
        width="200px">
        <template slot-scope="scope" >  //************************
          <el-popover trigger="hover"  placement="top" style="width: 300px;">
              <el-tag style="margin: 0 10px 0 0 ;" v-for="(item,index) in scope.row.blogTags" v-if="scope.row.blogTags[2]">{{item.tagsName}}</el-tag>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="info" mini v-if="scope.row.blogTags[0].tagsName">{{ scope.row.blogTags[0].tagsName }}</el-tag>
              <el-tag size="medium" type="info" mini v-if="scope.row.blogTags[1].tagsName">{{ scope.row.blogTags[1].tagsName }}</el-tag>
              <span v-if="scope.row.blogTags[2]">...</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      .....
</template>
<script>
export default {
    data() {
      return {
          tableData:[
              {
                  .....
                  blogTags:null
                  .....
              }
          ]
       }
    }
}
</script> 
复制代码

在这里由于向template中传入slot-scope="scope"时，而在模板内的scope.row.blogTags的blogTags的值为null，导致出现错误。

2.解决办法

<template slot-scope="scope" v-if="scope.row.blogTags" >加上if判断，以避免当scope.row.blogTags=null的情况

3.总结

在使用vue时多注意,后台返回值为null的情况。当出现Cannot read property '0' of null报错时，要多检查赋值是否正确(找了一下午问题/(ㄒoㄒ)/~~)。