Vue and vue-i18n combined to realize the multi-language switching method of background data, vuevue-i18n

Vue and vue-i18n combined to realize the multi-language switching method of background data, vuevue-i18n

Define functions in the XXX. js file:

GetUser (context, info) {context. $ http. get (SERVER_URL + '/users', info ). then (function (data) {let err = data. body. error; if (err = 0) {let dataObj = data. body. userLists; // obtain the data returned by the background. this. users = dataObj. items. map (function (e, I) {// traverses the obtained data, using this. $ t () maps each item of data to the translation resource e. gender = context. $ t (e. gender); // context is this, gender and diabetes_type are the keys in each items; there are three types of values in gender: 'gdrnf ', 'gdrf', and 'gdrm' e. diabetes_type = context. $ t (e. diabetes_type); return e;}); this. listLoading = false; // console. log (dataObj );}})},

Then, you can call the function XXX. getUser (this, info) in the vue component; perform operations on the data obtained from the backend and put it in the users array;

The above method is to traverse the obtained data through the map function, and use this. $ t () to map the value of items to the value in the translation resource, so as to implement the multi-language switching of background data;

En. json:

{   "GDRNF":"Not Fill",   "GDRF":"Female",   "GDRM":"Male",  } 

The above vue and vue-i18n with the realization of the background data multi-language switching method is small make up to share with you all the content, hope to give you a reference, also hope you can support a lot of help house.