在使用 vuejs 计算的内部翻译

Posted 2023-02-16

【中文标题】在使用 vuejs 计算的内部翻译

【英文标题】：Translate inside a computed with vuejs

【发布时间】：2022-01-22 06:26:20

【问题描述】：

我想翻译这段代码中的状态：

computed: 

    variant() 
      if (status === this.$t("vue.pending") || this.$t("vue.not_contract")) 
        return "warning";
       else if (status === this.$t("vue.confirmed")) 
        return "success";
       else if (status === this.$t("vue.expired") || this.$t("vue.declined")) 
        return "error";
       else 
        return "dark";
      
    ,
  ,

我试过把这个。$t 但它不起作用。

模板是：

    <div class="mt-2">
 <b-badge :variant="variant">
   contract.status </b-badge>
</div>

有人可以帮我吗？

控制台返回此错误： [vue-i18n] 键 'vue.not_contract' 的值不是字符串或函数！ [vue-i18n] 无法翻译 keypath ‘vue.not_contract’ 的值。使用 keypath 的值作为默认值。

我是这样安排的： 模板：

<div class="mt-2">
   <b-badge :variant="variant">
      $t(contract.status) </b-badge>
  </div>

脚本：

computed:
variant() 
      if (status === "pending" || "not_contract") 
        return "warning";
       else if (status === "confirmed") 
        return "success";
       else if (status === "expired" || "declined")
        return "error";
       else 
        return "dark";
      
    ,

【问题讨论】：

自上一个问题***.com/questions/70394734/… 以来没有任何改进。如果您有兴趣解决您的问题，您仍然需要提供一种重现问题的方法。在您的情况下，不知道什么不起作用。如果有错误，则需要列出。见***.com/help/how-to-ask 和***.com/help/mcve

您无法在计算属性中访问this，因此（afaik）在这里无法使用 vue-18n。相反，您需要在 methods 部分处理此登录。

错误：[vue-i18n] 键 'vue.not_contract' 的值不是字符串或函数！

@Alicia 在我的模板中如何调用这些方法？

所以使用方法与计算值几乎完全相同，除了它们在methods部分下，该方法需要返回一个值，当你调用它时，你会需要包含括号()（与计算不同）。语法见方法部分of this page in the docs

【参考方案1】：

确保在数据部分声明status，即使它的值为undefined，否则它不会是反应式的。

data()
 return 
  status: undefined
  // or status: 'pending', etc