[英]Vue.js and vue-i18n, json from $ajax to object literals
I am using Vue.js with the plugin vue-i18n for internationalization purposes. 我将Vue.js和插件vue-i18n一起用于国际化。 It accepts a lang
and a locales
parameters, the later being a list of property names and associated values ( object literals
). 它接受lang
和locales
参数,后面是属性名称和关联值( object literals
)的列表。 As such, referencing an object literals
list, either directly in the locales
option or stored in a local variable works as expected, such as in the example below: 这样,直接在locales
选项中或存储在本地变量中的引用object literals
列表可以按预期方式工作,例如下面的示例:
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
});
Please note that despite the formatting (the double quotes all the way through the list), the above is not a json array
, but an object literals
list with string literals
for the name of the properties . 请注意,尽管采用了格式设置(双引号始终贯穿列表),但上面的内容不是json array
,而是object literals
列表,其中包含属性名称的string literals
。
Now, what I've been struggling about is to relying on a Json file instead of declaring an object literals
list directly in my script. 现在,我一直在努力依靠Json文件,而不是直接在脚本中声明object literals
列表。 For instance, I've tried an ajax request, such as this: 例如,我尝试了一个ajax请求,例如:
Vue.use(VueI18n, {
lang: 'fr',
locales: $.ajax({
url: "../resources/i18n/locales.json",
dataType: "json",
type: "GET",
success: function(data) {
console.log(data);
}
})
});
The url
string is pointing at a locales.json
file with the exact same data and formatting as above, with the only difference that it is written inside square brackets. url
字符串指向具有与上述完全相同的数据和格式的locales.json
文件,唯一的区别是它写在方括号内。
I haven't had much success with this approach though, which in my mind doesn't make a lot of sense since data
seems to be correctly parsed. 我还没有与这种做法很成功,虽然,这在我的脑海里,因为不会使一个很有意义data
似乎被正确解析。 This is what I get in the console: 这是我在控制台中得到的:
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"
I wonder what I'm doing wrong? 我想知道我做错了什么吗?
$.ajax
returns an xmlHttpRequest
object, not a value. $.ajax
返回xmlHttpRequest
对象,而不是值。 You have to wait until the callback function of ajax
before the value is available: 您必须等到ajax
的回调函数才可以使用该值:
$.ajax({
url: "../resources/i18n/locales.json",
dataType: "json",
type: "GET",
success: function(data) {
Vue.use(VueI18n, {
lang: 'fr',
locales: data
});
console.log(data);
}
})
This also assumes that Vue is available globally 这也假定Vue在全球范围内都可用
You could try this approach: 您可以尝试这种方法:
// 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
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.