Vue.js和vue-i18n，json從$ ajax到對象文字

爲了國際化目的，我使用Vue.js和vue-i18n插件。它接受lang和locales參數，後者是屬性名稱和關聯值列表（object literals）。因此，引用一個object literals列表，或者直接在locales選項，或者存儲在本地變量正常工作，如下面的例子：

var locales = { 
    "en": { 
     "menu": { 
      "about": "about", 
      "news": "news", 
      "contact": "contact" 
     } 
    }, 
    "fr": { 
     "menu": { 
      "about": "à propos", 
      "news": "actualités", 
      "contact": "contacter" 
     } 
    } 
} 

Vue.use(VueI18n, { 
    lang: 'fr', 
    locales: locales 
});

請注意，儘管格式（雙引號所有通過列表的方式），以上不是json array，而是object literals列表與string literalsfor the name of the properties。

現在，我一直在努力的是依靠一個Json文件，而不是直接在我的腳本中聲明object literals列表。舉例來說，我已經試過一個Ajax請求，比如這個：

Vue.use(VueI18n, { 
    lang: 'fr', 
    locales: $.ajax({ 
       url: "../resources/i18n/locales.json", 
       dataType: "json", 
       type: "GET", 
       success: function(data) { 
        console.log(data); 
       } 
      }) 
});

的url串在locales.json文件具有完全相同的數據和格式如上指出，與這裏面寫的，唯一的區別方括號。

雖然我對這種方法並沒有太大的成功，但在我看來，這並沒有太大的意義，因爲data似乎被正確解析。這是我在控制檯中得到的結果：

Array[1] 
    0: Object 
    en: Object 
     menu: Object 
     about: "about" 
     contact: "contact" 
     news: "news" 
    fr: Object 
     menu: Object 
     about: "à propos" 
     contact: "contacter" 
     news: "actualités"

我在想我在做什麼錯？

來源

2016-02-26 pierrebonbon

$.ajax返回xmlHttpRequest對象，而不是值。你必須等待，直到前值ajax回調函數可用：

$.ajax({ 
    url: "../resources/i18n/locales.json", 
    dataType: "json", 
    type: "GET", 
    success: function(data) { 
     Vue.use(VueI18n, { 
      lang: 'fr', 
      locales: data 
     }); 
     console.log(data); 
    } 
})

這還假定Vue公司是提供全球

來源

2016-02-27 08:54:00 Jeff

感謝提醒我需要等待請求成功並且回調可用。我確實得到了幾個'[Vue warn]：現在評估表達式$ t（「news.message2」）'警告（表達式明顯改變）時出錯。數據似乎不可用，是否需要遍歷它？ – pierrebonbon

你可以試試這個方法：

// install the plugin 
Vue.use(VueI18n) 

// load the `fr` locale dynamically 
Vue.locale('fr', 
    function() { 
    // should return a promise 
    return new Promise(function (resolve, reject) { 
     $.ajax('../resources/i18n/locales.json').done(resolve).fail(reject) 
    }) 
    }, 
    function() { 
    vue.config.lang = lang 
    } 
)

來源

2016-10-02 13:23:02

Vue.js和vue-i18n，json從$ ajax到對象文字

回答

相關問題