我使用 Vue.js 和插件 vue-i18n 来实现国际化目的。它接受 lang
和 locales
参数,后者是属性名称和关联值(对象文字
)的列表。因此,直接在 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 数组
,而是一个包含 string literals
for the name of the properties 的对象文字
列表.
现在,我一直在努力解决的是依赖 Json 文件,而不是直接在脚本中声明对象文字
列表。例如,我尝试过 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"
我想知道我做错了什么?
最佳答案
$.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 在全局范围内可用
关于javascript - Vue.js 和 vue-i18n,从 $ajax 到对象文字的 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35662042/