从 Vue 访问 data() 对象

Question

（对于货币转换器）

我需要像这样访问一个对象：

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();

哪个没用

Link 到 codesandbox

PS: this.convertFrom.symbol returns 来自用户的输入。在这种情况下，它是 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
    }
}

现在，我们可以使用点符号或括号符号轻松访问对象的属性。但是由于这里的对象 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)

从 Vue 访问 data() 对象

Access data() object from Vue

javascript

vue.js

fetch-api