Vue基于TypeScript的一次错误使用分析
这篇文章给大家介绍Vue基于TypeScript的一次错误使用分析,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
成都创新互联从2013年成立,先为临潭等服务建站,临潭等地企业,进行企业商务咨询服务。为临潭企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
概述
在使用Vue基于TypeScript开发项目时,使用Element UI的Table来做列表数据的渲染。
在实际的数据中,有一列数据存储的是字典的 code
,这种设计对于后端的模型设计来说是没有问题的,我们的数据持久化只需要关注 code
就可以了。
但是前端显示的过程中,只显示 code
值,对用户来说是不友好的。对于用户来讲,他们需要的是可读的数据,即 code
对应的中文描述。
思路
这种问题通常会有两种解决方案:
后端处理:返回数据集时提前处理 code
值,将其转换成对应的中文描述前端处理:在渲染表格的过程中,实时的将 code
值转换为对应的中文描述
在本次示例中,我们采用前端处理的方式。
思路
需要处理的列用的是字典值,先从后端将字典数据获取过来,在渲染数据的时候,直接使用预加载的字典内容对数据进行转换。
错误的方案
@Component
export default class DictManage extends Vue {
modules = [];
constructor() {
super();
this.$store.dispatch('dict/fetchModules').then(res => {
console.log(res);
this.modules = res;
}).catch(err => console.error(err));
}
public covertModule(code): string {
const module = this.modules.find(it => it.code === code);
return module ? module.name : code;
}
}
_在构造函数中将数据加载进来,可以看到控制台有打印字典内容。但是在 __covertModul_e
中获取的 modules
却读不到值。
正确的方案
对上面的内容进行了改造,如下:
@Component
export default class DictManage extends Vue {
modules: any[] = [];
created() {
this.$store
.dispatch('dict/fetchModules')
.then(res => {
this.modules = [...res];
})
.catch(err => console.error(err));
}
public covertModule(code): string {
const module = this.modules.find(it => it.code === code);
return module ? module.name : code;
}
}
将预加载的处理迁移到 created()
里面, 此时 covertModule
中可以正常的获取 modules
值,表格渲染正常。
分析
在TypeScript下开发的Vue组件,属性变量modules对应着js下的 data()
中的modules,所以在构造函数中对modules进行赋值处理时,modules还没有创建。在covertModule中使用的modules是后来创建的实例,与构造函数中的不是同一个,所以获取到的一直是空。
关于Vue基于TypeScript的一次错误使用分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章名称:Vue基于TypeScript的一次错误使用分析
分享路径:http://pwwzsj.com/article/iepeoe.html