Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "vue data Dictionary how to take key values", so the editor summarizes the following contents, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue data Dictionary how to take a key value" article.

Vue data dictionary fetch key value

First of all: the data dictionary routing in the project has been configured.

Go to the project page

Introduction of data dictionary

Import {getTypeValue} from'@ / api/dict/dictValue/index'

Get the dictionary before creation

GetTypeValue ('org_attr_type') .then (response = > {this.attrTypeOptions = response.data.rows;})

Set the el drop-down box

Note that the above writing is wrong, note: key,:label,: value value

The search list also shows

Dictionary problem of vue Project

We often encounter a dictionary problem in the project, which is a fixed array obtained from the background, and then used in many parts of the system through the select selection box. If you get it each time you use it, there are often two problems:

1. When the amount of data in this array is too large, it is possible to click on the select drop-down box. The data has not yet been returned, resulting in select being unable to select.

two。 Every time you re-request the backend, when the amount of data is too large and there are many other interfaces on the same page, the page loads slowly.

Then how to solve it? As follows:

Write a dict.js file in utils

The contents are as follows:

/ / the key names in the encapsulated axiosimport {httpPost} from'@ / utils/axios'export function getDict (obj) {/ / this dictList are dictionary names That is, passing the corresponding name can get the corresponding list const dictList = {graduateSchool: [], major: [], topDegree: [], sex: [], title: [], workUnit: [], place: [], expertType: [],} for (let k in dictList) {httpPost ('/ sysdict/findByDictType') {dictType: `${k}`}) .then (res) = > {obj [k] = res.data})}} reference the getDict method just encapsulated in main.js

And declare the dictionary globally:

After import {getDict} from "@ / utils/dict.js" Vue.prototype.$dictObject = {} getDict (Vue.prototype.$dictObject), we can use it in the system.

"$dictObject. Dictionary name" instead of the corresponding list:

The above is the content of this article on "what is the way to get the key value of vue data dictionary". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

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.