Question

我是Vue.js的新手，因为我没有使用javascript，所以我的知识有限，而且我的问题似乎很愚蠢。

我一直在关注本教程，这在Currency Convert API更改其JSON响应（如果我们将其称为）之前有点过时了。

所以我用axios来获取API，下面的代码可以完美地工作

const key = this.from+'_'+this.to;
                const apiConv = axios.get('https://free.currencyconverterapi.com/api/v6/convert?q='+key+'&compact=ultra&apiKey=API_KEY///');
                apiConv.then(response =>{
                    console.log(response);
                    this.result = response.data[key];

我的问题如下：如果const key = this.from+'_'+this.to; = USD_EUR意味着this.result = response.data.key;必须有效！但是我得到undefined，当我尝试this.result = response.data.USD_EUR;时没有任何问题，而在key = USD_EUR

时我得到了价值

这是我从console.log(response);获得的数据

{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}data: USD_EUR: 0.87961__proto__: Objectheaders: {content-type: "application/json; charset=utf-8"}request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}status: 200statusText: ""__proto__: Object

任何人都可以向我解释为什么我必须添加data[key]才能获得该值，而data.key不起作用

Answer 1

data [key]支持可变键，而data.key不支持。

Answer 2

当您尝试使用data.key时，您正在要求JavaScript从key对象中获取一个名为USD_EUR（不是data）的项目。由于您的data中没有包含key的值（字面意义上的key，不是key的值），它将为您提供{{ 1}}。

使用undefined时，您要让JavaScript获取由data[key]变量表示的项目的值。在这种情况下，JavaScript将确定key的值为key并尝试获取USD_EUR，您将获取您的值。

记住-点子符号用于子键为非动态的情况。您不能使用点表示法从名称为动态的键中获取值。在这种情况下，您始终需要使用数组访问模式（使用data.USD_EUR）。

response.data不同的输出-Vue.js

2 个答案: