javascript 在带有vue i18n的Vue中对 prop 使用t平移

c9x0cxw0 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(136)

我想翻译通过props传递给我的组件的标题。但是我假设因为我的字符串是通过props传递的，所以它们不会像我的其他代码一样被翻译。下面你会发现我目前正在使用的2个组件：
父组件：

`<setting-section
    :title="$t('Random Text 1')"
    :description="$t('Random Text 2')"
  >`

在儿童中：

`<template>
  <div class="flex grid w-full">
    <div class="divider mr-4 mt-5" />
    <div class="header col-2">
      <div class="title text-primary">{{ title }}</div>
      <div class="description text-xs">{{ description }}</div>
    </div>
    <div class="flex col-10" v-if="!isLoading">
      <slot />
    </div>
    <div class="flex col-10" v-else>
      <Skeleton height="5rem" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Menu',
    props: {
      title: {
        type: String,
        default: '',
      },
      description: {
        type: String,
        default: '',
      },
    },
  };
</script>`

然而，如果我添加下面的变化，它显然不会工作。

`<template>
  <div class="flex grid w-full">
    <div class="header col-2">
      <div class="title text-primary">{{ $t('title')}} </div>
      <div class="description text-xs">{{ description }}</div>
    </div>
  </div>
</template>`

JavaScript

来源：https://stackoverflow.com/questions/75167471/using-t-translation-on-props-in-vue-with-vue-i18n

1条答案

按热度按时间

cnh2zyt31#

这两个解决方案都应该像我们在全局级别配置VueI18n一样工作，因此，翻译常量总是可以从任何嵌套组件访问。
根据两种使用情形进行现场演示**：**

Vue.component('child-one', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>'
});

Vue.component('child-two', {
  template: `<p>{{ $t('message') }}</p>`
});

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    "ja": {
      "message": "こんにちは、世界"
    },
    "en": {
      "message": "Hello World"
    }
  }
});

new Vue({
  el: "#app",
  i18n,
  data() {
    return {
      locale: "ja"
    }
  },
  watch: {
    locale(newLocale) {
      this.$i18n.locale = newLocale;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-i18n@8.8.2/dist/vue-i18n.min.js"></script>
<main id="app">
  <div>
    <label><input type="radio" value="ja" v-model="locale" />Japanese</label>
    <label><input type="radio" value="en" v-model="locale" />English</label>
  </div>

  <h3>Passing translated string from parent</h3>
  <child-one :childmsg="$t('message')"></child-one>
  
  <h3>Transaltions happens in child component itself</h3>
  <child-two></child-two>
</main>

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 在带有vue i18n的Vue中对 prop 使用t平移

1条答案

相关问题

热门标签

最新问答