Kombination von vue und vue-i18n zur Implementierung einer mehrsprachigen Umschaltmethode für Hintergrunddaten

Jetzt werde ich Ihnen eine Methode zur Kombination von vue und vue-i18n vorstellen, um eine mehrsprachige Umschaltung von Hintergrunddaten zu erreichen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Definieren Sie die Funktion in der XXX.js-Datei:

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;  //获取后台返回的数据
    this.users = dataObj.items.map(function (e,i) {  //遍历获取的数据，用this.$t()将每项数据与翻译资源对应
     e.gender=context.$t(e.gender);            //context 是this, gender 与 diabetes_type 为每个items里的key；gender里的value有三种：'GDRNF'、‘GDRF'、‘GDRM'
     e.diabetes_type = context.$t(e.diabetes_type);
     return e;
    });
    this.listLoading = false;
    // console.log(dataObj);
   }
  })
 },

Dann können Sie die Funktion in der Vue-Komponente aufrufen: XXX.getUser( this,info ); Fügen Sie die im Hintergrund erhaltenen Daten in das Benutzerarray ein, nachdem Sie die entsprechenden Vorgänge ausgeführt haben.

Die obige Methode besteht darin, die über die Kartenfunktion erhaltenen Daten zu durchlaufen und this.$t() zu verwenden Vergleichen Sie den Wert der Elemente mit dem entsprechenden Wert in der Übersetzungsressource, um eine mehrsprachige Umschaltung der Hintergrunddaten zu erreichen.

Teil der Daten in der en.json-Übersetzungsressource:

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

Das Obige bin ich. Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

$set- und Array-Aktualisierungsmethoden in vue.js_vue.js

JQuery-Auswahlkomponente ist ausgewählte Wertmethode

Methode zur Codeaufteilung in React-Router4 (basierend auf Webpack)

Das obige ist der detaillierte Inhalt vonKombination von vue und vue-i18n zur Implementierung einer mehrsprachigen Umschaltmethode für Hintergrunddaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!