如何解决Vuetify 切换器 I18N 翻译
我正在使用 I18N 翻译我的 vuetify 项目中的页面。
这是我的实际代码:
<template>
<div>
<v-app-bar
color="#007dbc"
style="z-index: 1000"
>
<v-img
class="mx-2"
src="@/assets/dkt_logo.png"
max-height="40"
max-width="150"
contain
></v-img>
<v-toolbar-title style="color: white; font-size: 27px">PCB Sizing</v-toolbar-title>
<v-spacer></v-spacer>
<select v-model="$i18n.locale">
<option v-for="(lang,i) in langs" :key="`Lang${i}`" :value="lang">
{{ lang }}
</option>
</select>
<v-btn icon @click="logout" v-if="isLogin">
<v-icon style="color: white">mdi-logout-variant</v-icon>
</v-btn>
</v-app-bar>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name : "AppBar",data: () => ({
langs: ['fr','en']
}),methods: {
logout(){
this.$router.push('/')
}
},computed:{
isLogin(){
return !['Login'].includes(this.$route.name)
}
}
})
</script>
我想用这样的切换器来代替我的选择:
<v-switch
v-model="switch1"
:label="`Switch 1: ${switch1.toString()}`"
></v-switch>
有人知道怎么做吗?
谢谢
安东尼
解决方法
嗨,您可以使用观察者来做到这一点:
<template>
<v-switch v-model="switch1" label="Switch 1"></v-switch>
</template>
<script>
export default Vue.extend({
data: () => ({
switch1: false;
}),watch: {
switch1(newValue,oldValue) {
this.$i18n.setLocale(newValue ? 'fr' : 'en');
},},});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。