[JavaScript知识库]【Vue】在method使用return 没有反应？怎么解决

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

今天在使用Vue+elementUi编写表格的时候，想获取当前车辆的 品牌名称，由于没有进行两表联查，其他下拉框已经查询了所有车辆类型。就想着写一个 方法，传入类型编号，在前端使用forEach解决

一、示例

表格显示列

	 <el-table-column label="车类型" align="center">
        <template slot-scope="scope">
           <!-- {{ this.brandList.filter(data =>  data.brandId == scope.row.brandId).brandName}} -->
           <span>{{getBrandName(scope.row.makeBrandId)}} </span>
        </template>
      </el-table-column>

方法实现

 /**
     * 根据汽车类型获取类型名称
     */
    getBrandName (makeBrandId) {
        this.brandList.forEach(item => {
            if(item.brandId == makeBrandId) {
                  return  item.brandName
            }
        })
    },

是不是感觉非常的好，没什么问题，但是让我失望了，没有任何反应

二、解决方法

非常的简单，只用把匹配的值通过局部变量存储起来，到最后返回即可

     /**
      * 根据汽车类型获取类型名称
      */
     getBrandName (makeBrandId) {
         let brandName = "";
         this.brandList.forEach(item => {
             if(item.brandId == makeBrandId) {
                 brandName = item.brandName
             }
         })
        return brandName
     },

总结

不要卡在一个地方，要灵活变通，先出效果，再谈最好的方式，但是这个原因笔者还没有理解，先记录一下，
如有知道的读者，虚心请教！