如何在组件中使用Vue I18n翻译attribute/property

Question

如何翻译组件的 passed-in attribute/property？例如，我有一个卡片组件，其标题和描述属性定义如下。

<!-- my-card  component -->
    <template>
      <div>
        <h2>{{title}}</h2>
        <span>{{description}}</span>
      </div>
    </template>

    <script>
      export default {
        props: {
          title: String,
          descritpion: String
        }
      }
    </script>

然后像这样在另一个page/component中使用my-card组件

  

  <template>
      <div>

        <header>Page header</header>
        <my-card :title="the best card title" :description="the best description" />
        <footer>Page footer</footer>
      </div>
    </template>

如何使用 vue I18n 翻译组件道具？

  

  <template>
      <div>

        <header>Page header</header>
        <my-card :title="{{ $t('myCard.title')}}" :description="{{$t('myCard.description')}}" />
        <footer>Page footer</footer>
      </div>
    </template>

我似乎无法让翻译与 passed-in 道具一起使用。

PS：我知道我可以在定义 my-card 组件的地方添加翻译，但这里的问题是组件是来自 NPM 库的 third-party 组件。

我知道 React.js 中的某些软件包具有此功能。

Answer 1

不使用 {{}} 只需绑定翻译即可：

 <my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />

如何在组件中使用Vue I18n翻译attribute/property

How to use Vue I18n translation in component attribute/property

vue.js

nuxt.js

vue-i18n