從 Vue 訪問 data() object

Question

（對於貨幣轉換器）

我需要像這樣訪問 object：

rates:
  AUD: 1.708562
  SGD: 1.546211

我從 API 獲得這些費率，但它們不按順序排列。 即，如果我要求將美元兌換成英鎊，它將首先顯示英鎊。 所以我需要一種方法來獲取請求的符號來獲取值。

我試過這個：

const from = res.rates.this.convertFrom.symbol;
// -----AND-----
const fromSymbol = this.convertFrom.symbol;
const from = res.rates.fromSymbol.toString();

哪個沒用

鏈接到代碼框

PS： this.convertFrom.symbol返回用戶的輸入。 在這種情況下，它是symbol: 'SGD'

Answer 1

所以，基本上你有如下設置數據：

convertFrom: {
    currency: "GBP: British Pounds",
    symbol: "",
    amount: 0
},
  convertTo: {
    currency: "USD: United States Dollar",
      symbol: "",
        amount: 0
  }

接下來，在convert()方法中，您還設置了貨幣符號，如：

this.convertFrom.symbol = this.convertFrom.currency.toString().split(":")[0];
this.convertTo.symbol = this.convertTo.currency.toString().split(":")[0];

所以，現在convertFrom.symbol和convertTo.symbol的值是：

this.convertFrom.symbol => "GBP"
this.convertTo.symbol => "USD"

您還提到這里的fetch響應是這樣的：

{
    "success": true,
    "base": "EUR",
    "rates": {
        "GBP": 0.869339,
        "USD": 1.0875
    }
}

現在，我們可以使用點符號或括號符號輕松訪問對象的屬性。 但由於 object 的rates鍵是動態的，我們需要使用括號符號，如：

const from = res.rates[this.convertFrom.symbol]
const to = res.rates[this.convertTo.symbol]

演示：

 const res = { "success": true, "base": "EUR", "rates": { "GBP": 0.869339, "USD": 1.0875 } } const data = { convertFrom: { symbol: "GBP" }, convertTo: { symbol: "USD" } } const from = res.rates[data.convertFrom.symbol]; const to = res.rates[data.convertTo.symbol]; console.log('From:\t', from) console.log('To:\t', to)