Vue.js:javascript数据函数中没有动态区域设置

我们正在使用来实现区域设置，并在我们的网页上动态更改区域设置

但我们目前面临以下问题

这一个不是动态工作的：

HTML: 
<b-breadcrumb :items="items"/>

Javascript:
public data() {
  return {
    items: [
        text: this.$t("COMPONENTS.ADMINISTRATION.HOME"),
        href: "/"
      ]
  }
}

HTML:
<p>{{$t("COMPONENTS.ADMINISTRATION.HOME")}}</p>

HTML：
Javascript:
公共数据（）{
返回{
项目：[
文本：this.$t（“COMPONENTS.ADMINISTRATION.HOME”），
href:“/”
]
}
}

这一个正在动态工作：

HTML: 
<b-breadcrumb :items="items"/>

Javascript:
public data() {
  return {
    items: [
        text: this.$t("COMPONENTS.ADMINISTRATION.HOME"),
        href: "/"
      ]
  }
}

HTML:
<p>{{$t("COMPONENTS.ADMINISTRATION.HOME")}}</p>

HTML：
{{$t（“COMPONENTS.ADMINISTRATION.HOME”）}

你需要进一步的信息吗

有谁有什么聪明的办法来解决上面这个例子吗

---

提前谢谢

我认为您不应该将计算属性直接附加到数据初始化中。您是否可以尝试创建一个名为

translatedItems

的计算属性，并将其传递给该属性？类似于

computed:{translatedItems（）{return this.$t（“COMPONENTS.ADMINISTRATION.HOME”）}

。更正：我认为您不应该直接将被动属性附加到数据初始化。我正在使用Typescript，并尝试以这种方式实现：

public computed（）{return translatedItems:function（）{return[{text:this.$t（“COMPONENTS.ADMINISTRATION.HOME”），href:“/”}]}}}

我将translatedItems传递给面包屑的项目，但是这样做（当然）在初始加载时，面包屑中没有显示任何项目，而且在区域设置更改时仍然没有显示。这可能会有所帮助：在一些随机测试之后，我可以将计算属性放入其中（直到现在我才熟悉它们）它终于成功了！我使用了您在第一个答案中提供给我的代码。您提供的最后一个链接不起作用。这是我不久前实现它的方式…不管它现在是否起作用：）-您想为我的问题提供一个正式的答案，以便我确认吗？谢谢！