Javascript VueJS api调用未定义数据_Javascript_Vue.js_Vuejs2

Javascript VueJS api调用未定义数据

javascript vue.js vuejs2

Javascript VueJS api调用未定义数据,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在学习VueJS 2.0，并且正在连接到一个API，在这个API中，我希望某些数据的值在输入更改时发生更改。下面是使用dev工具输出的内容：加拿大元：未定义欧洲欧元：未定义欧洲镑：未定义美元：1232 每当我在USD输入字段中输入1232时，它不会返回任何内容，并将这些属性保留为未定义。这是代码 new Vue({ el: '#app', data: { usd: '', canadianDollar: '', europeanPound: '',

我正在学习VueJS 2.0，并且正在连接到一个API，在这个API中，我希望某些数据的值在输入更改时发生更改。下面是使用dev工具输出的内容：

加拿大元：未定义欧洲欧元：未定义欧洲镑：未定义美元：1232

每当我在USD输入字段中输入1232时，它不会返回任何内容，并将这些属性保留为未定义。这是代码

new Vue({
  el: '#app',
  data: {
    usd: '',
    canadianDollar: '',
    europeanPound: '',
    europeanEuro: ''
  },

  // Watch methods
  watch: {
      usd: function() {
          this.convertCurrency()
      }
  },

  // Logic Methods
  methods: {
    convertCurrency: _.debounce(function() {
        var app = this;
        if (app.usd.length !== 0) {

            // Show that the things are loading in.
            app.canadianDollar = 'Searching...'
            app.europeanPound = 'Searching...'
            app.europeanEuro = 'Searching...'
            console.log(app.usd)
            axios.get("http://api.fixer.io/latest?base=USD&" + app.usd)
                .then(function(response) {
                    app.canadianDollar = response.data.CAD
                    app.europeanPound = response.data.GBP
                    app.europeanEuro = response.data.EUR
                })
                .catch(function(error){
                    app.canadianDollar = "ERROR"
                    app.europeanPound = "ERROR"
                    app.europeanEuro = "ERROR"
                })
        }
    }, 500)
  }
})

以及HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" name="" value="" v-model="usd">
    <ul>
        <li>Canadian Dollar: {{canadianDollar}}</li>
        <li>European Pound: {{europeanPound}}</li>
        <li>European Euro: {{europeanEuro}}</li>
    </ul>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js" charset="utf-8"></script>
  <script src="index.js" charset="utf-8"></script>
</body>
</html>

当我输入一个数字时，它确实给了我搜索的部分，但消失了，什么也没有显示。

response.data.rates.CAD;

你有

response.data.CAD;

我建议换衣服

then(function(response) {
   app.canadianDollar = response.data.CAD
   app.europeanPound = response.data.GBP
   app.europeanEuro = response.data.EUR
})

到

那就是你可以看到什么被退回

还有axios。gethttp://api.fixer.io/latest?base=USD& +app.usd应该有一个像vulue:axios这样的名字。gethttp://api.fixer.io/latest?base=USD&VALUE= +app.usd，但您必须检查他们的api以查看它的调用意图

then(function(response) {
   app.canadianDollar = response.data.CAD
   app.europeanPound = response.data.GBP
   app.europeanEuro = response.data.EUR
})

then(function(response) {
   console.log(response);
})