vue與vue-i18n結合實現後台資料的多語言切換方法，vuevue-i18n

vue與vue-i18n結合實現後台資料的多語言切換方法，vuevue-i18n

在XXX.js檔案中定義函數：

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);   }  }) },

然後可以在vue 組件中調用函數 ：XXX.getUser(this,info); 將後台擷取的資料做相應操作後放入users數組；

以上方法是通過map函數遍曆擷取到的資料，用this.$t()將items的value與翻譯資源中的value對應，從而實現後台資料的多語言切換；

en.json翻譯資源中的部分資料：

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

以上這篇vue與vue-i18n結合實現後台資料的多語言切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。