如何在组件的属性中反应性地设置vue-i18n
如何在组件的属性中反应性地设置vue-i18n
提问于 2020-12-06 00:23:02
我试图根据异步函数的结果显示一些消息或错误。当响应的请求不包含message属性时，我应该使用我自己的属性。问题是，当我在someMethod方法response.message (数据)中使用this.$t("message")时，它不是被动的。因此，在区域设置更改后，它不会更改。
<v-alert v-if="response.error || response.message"
:type="response.error ? 'error' : 'info'">
{{response.error ? response.error : response.message}}
</v-alert>
export default {
data() {
return {
response: {
message: "",
error: ""
}
};
},
methods: {
async someMethod() {
const apiResponse = await sendRequestToAnApi();
if (apiResponse.message) {
this.response.message = apiResponse.message;
} else {
this.response.message = this.$t("translation")
}
}
}
}我想我应该使用计算属性来使其工作，但我不知道如何将响应对象与可能的API响应混合在一起。
任何帮助我们都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-06 15:26:53
您可以让您的应用编程接口不仅返回一条消息，还返回一段代码，其中消息可以是基于用户区域设置的文本字符串，而代码可以是始终为英语的插件，如users.added或project.created。您可以将此代码存储在response.code中，并创建一个计算属性，检查此代码并返回正确的vue-i18n转换。
export default {
data() {
return {
response: {
code: "",
error: ""
}
};
},
methods: {
async someMethod() {
const apiResponse = await sendRequestToAnApi();
if (apiResponse.code) {
this.response.code = apiResponse.code;
} else {
this.response.code = null
}
}
},
computed: {
translatedMessage () {
if (this.response.code === 'users.added') {
return this.$t('translate')
}
return 'unknown code'
}
}
}当然，您也可以使用来自API的文本字符串来实现此功能，但就我个人而言，我喜欢使用独立于语言设置的特定代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65159179
复制相关文章
相似问题
腾讯云开发者
