Vuetify 切换器 I18N 翻译

问题描述

我正在使用 I18N 翻译我的 vuetify 项目中的页面。

现在，我有一个，我想使用 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>