Vue I18n 多语言

Question

我正在用vue js做多语言支持，一切正常，但是当我改变语言时，数据中的数据菜单项名称不变。

<template v-slot:MenuItem>
    <MenuItems v-for="(Item,Index) in menuItem"
               :key="Index"
               :items="Item"
               :depth="Index"
    >
        <router-link :to="Item.path">{{Item.name}}</router-link>
    </MenuItems>
</template>

export default {
    name: "Nav",
    data() {
        return {
            menuItem: [
                {
                    name: this.$t('navbar.home'),
                    path: '',
                },
                {
                    name: this.$t('navbar.gallery'),
                    path: 'gallery',
                },
                {
                    name: this.$t('navbar.contact'),
                    path: 'contact',
                },
            ],
        }
    }
}

Answer 1

data() 仅在创建组件时被调用一次，并且它不是反应式的。（所以基本上当你的组件被创建时，它会得到你当前的翻译作为初始值）

要使属性对 $t() 具有反应性，您应该改用计算变量：

  export default {
    name: "Nav",
    data() {
      // exclude from here
      return {};
    },
    computed: {
      menuItem() {
        return [
          {
            name: this.$t("navbar.home"),
            path: "",
          },
          {
            name: this.$t("navbar.gallery"),
            path: "gallery",
          },
          {
            name: this.$t("navbar.contact"),
            path: "contact",
          },
        ];
      },
    },
  };

Vue I18n 多语言

Vue I18n multi language

vue.js

vue-i18n