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

Question

如何翻译组件的传入属性/属性？例如，我有一个卡片组件，其标题和描述属性是这样定义的。

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

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

然后像这样在另一个页面/组件中使用 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 来翻译组件 props？

  

  <template>
      <div>

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

我似乎无法让翻译与传入的道具一起工作。

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

我知道 React.js 中的一些包有这个功能。

Answer 1

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

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