本文介绍了一个基于TypeScript的Vue误用分析。内容非常详细，感兴趣的朋友可以参考一下。希望对你有帮助。
概述
使用Vue开发基于TypeScript的项目时，使用元素UI的表来呈现列表数据。
在实际数据中，有一列数据存储字典的代码。这个设计对于后端模型设计没有问题，我们只需要关注数据持久化的代码。
但是在前端显示的过程中，只显示代码值，对用户不友好。对于用户来说，他们需要的是可读的数据，也就是代码对应的中文描述。
00-1010这个问题通常有两种解决方案：
后端处理：返回数据集时提前处理。
代码值，并将其转换为相应的中文描述。前端处理：在渲染表格的过程中，实时
代码值转换为相应的中文描述。
在这个例子中，我们使用前端处理。
思路
要处理的列使用字典值。首先，从后端获取字典数据。呈现数据时，预加载的字典内容直接用于转换数据。
思路
@组件
导出默认类DictManage扩展了Vue {
modules=[]；
构造函数(){ 0
super()；
这个。$ store . dispatch(‘ dict/fetchModules ‘)。然后(RES=}
console . log(RES)；
this.modules=res
}).catch(err=console . err(err))；
}
public covertModule(代码):字符串{
const module=this . modules . find(it=it . code===code)；
返回模块？module.name :代码；
}
}
_在构造函数中加载数据，可以看到控制台中有一个打印字典。但是，_ _ covertModul _ e _ e中获得的模块无法读取该值。
错误的方案
将上述内容修改如下：
@组件
导出默认类DictManage扩展了Vue {
module : any[]=[]；
已创建(){ 0
这个。$商店。调度(‘ dict/fetchModules ‘)。然后(RES=}
this.modules=[.RES]；
})。catch(err=console . err(err))；
}
public covertModule(代码):字符串{
const module=this . modules . find(it=it . code===code)；
返回模块？module.name :代码；
}
}
将预加载的处理迁移到created()，此时可以在covertModule中正常获取模块值，表渲染正常。
00-1010对于在TypeScript下开发的Vue组件，属性变量modules对应的是js下data()中的模块，所以在构造函数中赋值模块时，还没有创建模块。covertModule中使用的模块是后来创建的实例，它们与构造函数中的不同，因此获得的模块总是空的。
这里将分享基于TypeScript的Vue误用分析。希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/78666.html