[Vue warn]: Error in render: 解决方法

[Vue warn]: Error in render: “TypeError: Cannot read property ‘rightsLevel’ of null” 解决方法

<!-- 作用域插槽 -->
	<template slot-scope="scope">
	 	<el-button :type="this.rightsLevel[scope.row.level][1]" plain>{{this.rightsLevel[scope.row.level][0]}}</el-button>  
	</template>
	
export default {
  data(){
    return {
      //权限列表
      rightsList: [],
      rightsLevel: {
        '0': ['一级','success'],
        '1': ['二级','warning'],
        '2': ['三级','danger']
     }
   }
}
                

在通过数据渲染组件按钮文本和样式时发生了 Error in render错误。解决方法就是将this.rightsLevel中的this去掉，正确代码如下：

<!-- 作用域插槽 -->
	<template slot-scope="scope">
	 	<el-button :type="rightsLevel[scope.row.level][1]" plain>{{rightsLevel[scope.row.level][0]}}</el-button>  
	</template>
	
export default {
  data(){
    return {
      //权限列表
      rightsList: [],
      rightsLevel: {
        '0': ['一级','success'],
        '1': ['二级','warning'],
        '2': ['三级','danger']
     }
   }
}