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到对象文字

回答

相关问题