随手记-踩坑记1

1.关于vue中使用v-if='function( )'的问题

最近在做项目，想实现的功能是：< el-table >表格最后一列有一个按钮，这个按钮有两个可选项，根据条件选择展示哪一个按钮，按钮分别为“移除管理”和“添加管理”，如果当前行没有被管理则展示“添加管理”，否则展示“移除管理”。需求设计到后端请求，ajax请求。
一开始的思路是在后端写逻辑：判断当前行是否被管理，在前端发送ajax请求，代码如下：

// 按钮part
<el-button v-if="isDeptManage(scope.row)"
		   size="mini"
           type="text"
           icon="el-icon-delete"
           @click="handleDelete(scope.row)"
          >移除管理</el-button>
<el-button v-else
		   size="mini"
           type="text"
           icon="el-icon-delete"
           @click="handleDelete(scope.row)"
          >加入管理</el-button>  

// method:方法部分,isDeptManage(row.id)返回值为boolean
isDeptManage(row) {
	isDeptManage(row.id).then(resp => {
		return resp;
})

上面的代码在v-if里是获取不到boolean值的，获取到的值是undefined，网上说是什么异步请求，要使用callback，不太懂。.then内的代码不就是异步请求执行结束后才执行吗？
后来我是把逻辑直接改到前端了，涉及到return的函数，里面就不要有ajax请求了。

2.使用elementui的this.$confirm的坑

handleAdd(row) {
   const stationId = row.id;
   const deptId = this.deptId;
   this.$confirm('是否确认将编号为"' + stationId + '"的探测站加入该部门的管理?', "警告", {
   confirmButtonText: "确定",
   cancelButtonText: "取消",
   type: "warning"
   }).then(function() {
   // ==注意这里不能在使用vue的this==
   		return addStationDept({stationId: stationId, deptId: deptId});
   }).then(() => {
        this.getList();
        this.msgSuccess("添加成功");
        }).catch(function() {});
 }

注意：在this.$confirm后面的 .then()不能再使用this，指向不一样了