Vue和Element UI项目的异常：TypeError: Cannot read property ‘reduce‘ of null(解决办法)

1.声明

当前内容主要为复习和使用Vue和Element UI并解决其中出现的问题

问题描述

1. 为table中使用vue绑定数据的问题，启动时出现一大堆错误TypeError: Cannot read property ‘reduce’ of null
2. 当前版本："element-ui": "2.13.0" 和 vue": "2.6.10"（当前版本无问题）
3. 响应后页面成功显示数据

2.当前问题的demo

前台vue的页面

<template>
  <div class="app-container">
    <h1 align="center">欢迎使用我的自定义的表格1</h1>
    <!-- Note that row-key is necessary to get a correct row order. -->
    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="65">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="name">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="pwd">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.pwd }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="age">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="address">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.adress }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="createTime">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.createTime }}</span>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

当前页面脚本

<script>
/* import { fetchList } from '@/api/article'
import Sortable from 'sortablejs' */
/* 导入axios这个插件用于访问当前的后台数据 */
import axios from 'axios'

export default {
    
    
  name: 'DragTable',
  data() {
    
    
    return {
    
    
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
    
    
        page: 1,
        limit: 10
      },
      sortable: null,
      oldList: [],
      newList: [],
      httpUrl: 'http://localhost:8080'
    }
  },
  created() {
    
    
    this.getList()
  },
  methods: {
    
    
    async getList() {
    
    
      this.listLoading = true
      axios
    	.post(this.httpUrl + '/selectUserAllUsingPage')
    	.then(function(response) {
    
    
    		setTimeout(function() {
    
    
   			this.listLoading = false
    			this.list = response.data
    		}.bind(this), 1000)
    	}.bind(this))
    	.catch(function(error) {
    
    
    		this.$message.error('请求后台数据失败，服务器异常！')
    		this.listLoading = false
    	}.bind(this))
  }
}
</script>

发现响应并没有问题，但是却在初始化的时候报错，通过查找发现，原来是当前的list数据为null的结果(null导致的问题)

3.解决办法

直接修改当前的data为[]或者{}都可以

 list: [],

然后重启就不会报错了