My Vue.js function for currency conversion returns Nan

Asked

Viewed 485 times

2

My Vue.js function for currency conversion using the API of http://free.currencyconverterapi.com returns Nan, instead of returning the currency conversion.

<template>
    <div class="conversor">
        <h2>{{moedaA}} Para {{moedaB}}</h2>
        <input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
        <input type="button" value="Converter" v-on:click="converter">
        <h2>{{moedaB_value}}</h2>
    </div>
</template>

<script>
export default {
    name: "Conversor",
    props: ["moedaA","moedaB"],

    data(){
          return {
              moedaA_value :"",
              moedaB_value : 0
          };
    },
    methods:{
        converter(){
            let de_para = this.moedaA + "_" + this.moedaB;


            let url = "http://free.currencyconverterapi.com/api/v5/convert?q="+
                de_para
            +"&compact=ultra&apiKey=xxxxxxxxxxxxxxxxxxxx";

            fetch(url)

                .then(res=>{
                    return res.json()
                })
                .then(json =>{

                    let cotacao = json[de_para].val;
                    this.moedaB_value = (cotacao * parseFloat(this.moedaA_value)).toFixed(
                            2
                    )
                })
        }
    }  
};
</script>

<!-- O scoped serve para limitar o estilo apenas ao arquivo em que a tag é usada-->  
<style scoped>
</style>
javascript vue.js

  • What gives console.log(url)? Is this your/real API key? this is a public space... you should not put private data here.

  • Thanks for the touch of Key, had not attacked me, console.log(url) brings me the correct url, when using the url in the browser it brings me the following json { USD_BRL: 3.939041 }

1 answer

1


Your mistake was in the way you’re extracting the value of json that you receive. That key .val does not exist, you must extract directly with json[de_para].

A working example would be like this:

new Vue({
  el: '#vue-app',
  name: "Conversor",
  props: {
    moedaA: {
      default: 'USD'
    },
    moedaB: {
      default: 'EUR'
    }
  },

  data() {
    return {
      moedaA_value: "",
      moedaB_value: 0
    };
  },
  methods: {
    getUrl(currencies) {
      return [
        "http://free.currencyconverterapi.com/api/v5/convert?q=",
        currencies,
        "&compact=ultra&apiKey=af285a9098c9614181bd"
      ].join('');
    },
    converter() {
      const de_para = this.moedaA + "_" + this.moedaB;
      const url = this.getUrl(de_para);
      fetch(url)
        .then(res => {
          return res.json()
        })
        .then(json => {
          const cotacao = json[de_para];
          const valor = (cotacao * parseFloat(this.moedaA_value)).toFixed(2)
          this.moedaB_value = `${valor} ${this.moedaB}`;
        })
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="vue-app">
  <div class="conversor">
    <h2>{{moedaA}} Para {{moedaB}}</h2>
    <input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
    <input type="button" value="Converter" v-on:click="converter">
    <h2>{{moedaB_value}}</h2>
  </div>
</div>

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.