【vue】利用计算属性解决filter无法使用this的问题

常见现象

项目中常常碰到，一个显示结果依赖另外一个显示结果的情况。

比如：A 的显示中有一个公司ID的字段 company_id ，但是实际显示的时候，需要显示公司名，company_name。那么常见的做法就是，在filter里面写个过滤器，将company_id转换为company_name

但是这个显示结果不尽人意，原因是vue在过滤器当中禁止this的使用，此处调用会导致代码报错。

普遍解决办法

那么有些一些做法是在methods定义一个转换方法，但是这种办法缺点在于严重依赖网络请求的先后顺序，此示例当中必须先请求company_name对于的接口，其次请求company_id对应的网络接口。此办法严重拖慢了网页的相应速度。

示例代码如下：

<template #company_id="text">{{companyName(text)}}</template>

data() {
    return {
      projectFormNameDisable: false,
      loadProjectSpinning: false,
      projectData: [],
      companyList: [],
    };
  },
mounted() {
    companylist().then(response => {
      this.companyList = response.data.data;
      this.loadPorjectData(); //依赖companylist网络请求
    });
},
methods: {
    companyName(company_id) {
      return this.companyList.filter(item => {
        return item.company_id == company_id;
      })[0].company_name;
    },
    loadPorjectData() {
      this.loadProjectSpinning = true;
      const params = this.page;
      projectList(params).then(response => {
        const data = response.data;
        this.projectData = data.data.list;
        this.loadProjectSpinning = false;
      });
    }
}

利用计算属性的特性解决

在实践中发现，可以利用计算属性解决这个问题，因为计算属性的刷新会监控内部依赖数据。这样就无需嵌套式的网络请求了。

示例代码如下：

<template #company_id="text">{{companyName(text)}}</template>

data() {
    return {
      projectFormNameDisable: false,
      loadProjectSpinning: false,
      projectData: [],
      companyList: [],
    };
  },
mounted() {
    this.loadPorjectData(); //不再依赖companylist网络请求
    companylist().then(response => {
      this.companyList = response.data.data;
    });
},
computed: {
    companyName() {
        // 在计算属性内返回一个匿名函数，来接收外不参数
      return function(company_id) {
        return this.companyList.filter(item => {
          return item.company_id == company_id;
        })[0].company_name;
      };
    },
methods: {
    loadPorjectData() {
      this.loadProjectSpinning = true;
      const params = this.page;
      projectList(params).then(response => {
        const data = response.data;
        this.projectData = data.data.list;
        this.loadProjectSpinning = false;
      });
    }
}

这样，就解决了，网络请求相互依赖的问题