我需要連接一個 json 鍵以根據當前選擇的語言顯示內容。在 API 中，我得到了選擇的回應和當前語言。回應如下
{
lang : "en"
heading_ar: "???? ?????? ??????? ????????? ???????"
heading_en: "Meet, Eat & Enjoy the true test"
description_ar: "<p>???? ????? ????? ??? ??? ???? ??? ?? ??????? ??????? ?????</p>"
description_en: "<p>It is a long established fact that a</p>"
id: 1
}
在模板中我應該顯示內容。但我無法lang在heading . 我嘗試了不同的方法，但沒有任何效果。
<template>
<h1 class="banner-title">{{banner.home.heading_ banner.home.lang}}</h1>
</template>
謝謝你
uj5u.com熱心網友回復：
<template>
<h1 class="banner-title">{{banner.home.heading_en}}{{banner.home.lang}}</h1>
</template>
編輯：澄清要求后
<template>
<h1 class="banner-title">{{computedHeading}}</h1>
</template>
并在您的腳本中添加計算屬性
computed: {
// a computed getter
computedHeading: function () {
if(this.banner.home.lang == "en"){
return this.banner.home.heading_en
}else{
return this.banner.home.heading_ar
}
}
}
編輯：在 OP 說他有很多語言優化之后
請注意，這不需要是計算屬性，如果您的資料沒有改變，只需設定一次
computed: {
// a computed getter
computedHeading: function () {
let prefix = "heading_"
let headingPath = prefix this.banner.home.lang
return this.banner.home[headingPath]
}
}
uj5u.com熱心網友回復：
With string interpolation {{`${banner.home.heading_} some text ${banner.home.lang}`}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367438.html
標籤：javascript 拉拉维尔 Vue.js 惯性
上一篇：遍歷過濾后的陣列
下一篇：顯示時隱藏專案符號：使用行內