Shulou(Shulou.com)06/02 Report--

This article introduces a misuse analysis of Vue based on TypeScript, which is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Overview

When using Vue to develop projects based on TypeScript, use Element UI's Table to render the list data.

In the actual data, there is a column of data stored in the dictionary code, this design is no problem for the back-end model design, our data persistence only needs to focus on code.

However, during the front-end display, only the code value is displayed, which is unfriendly to the user. As far as users are concerned, what they need is readable data, that is, the corresponding Chinese description of code.

Train of thought

There are usually two solutions to this problem:

Back-end processing: when returning the data set, the code value is processed in advance and converted to the corresponding Chinese description front-end processing: in the process of rendering the table, the code value is converted into the corresponding Chinese description in real time

In this example, we use front-end processing.

Train of thought

The columns that need to be processed use dictionary values. First, the dictionary data is obtained from the back end. When rendering the data, the preloaded dictionary content is directly used to convert the data.

Wrong scheme @ 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

}

}

_ load the data in the constructor and you can see that the console has the contents of the printed dictionary. However, the modules obtained in _ _ covertModul_e does not read the value.

The right plan

The above content has been modified as follows:

@ 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

}

}

Migrate the preloaded processing to created (). At this time, the modules value can be obtained normally in covertModule, and the table rendering is normal.

Analysis.

For Vue components developed under TypeScript, the attribute variable modules corresponds to the modules in data () under js, so when modules is assigned in the constructor, modules has not yet been created. The modules used in covertModule is a later created instance, which is not the same as in the constructor, so what you get is always empty.

This is the end of a misuse analysis of Vue based on TypeScript. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.