首页 > 解决方案 > 为什么 toFixed 不是函数

问题描述

当我使用来自 buefy 的 numberinput 时,我得到 toFixed 不是函数错误。有趣的是,在我将该数字输入添加到我的模板之前,我的一切工作正常。当我删除 toFixed 函数时,当我没有更多 toFixed 函数时,我仍然会遇到相同的错误,哈哈。真的不知道我能做些什么来避免这个错误,在 toFixed 函数和具有 onclick 函数的按钮中一切正常,但是为什么另一个元素会这样做呢?

我的代码:

<template>

  <div class="box">
      <div class="seletor">
      <b-select v-model="moedaA" placeholder="USD" rounded>
                    <option value="USD">USD</option>
                    <option value="BTC">BTC</option>
                </b-select>
                      <h1>Para {{moedaB}}</h1>
                      </div>
                      <div class="outro">
      <b-field>
            <b-numberinput type="is-info" v-model="moedaA_value" v-bind:placeholder="moedaA" rounded></b-numberinput>
        </b-field>
    <b-button type="is-info" @click="converter">Converter</b-button>
    <h2>{{moedaB_value}} {{DePara}}</h2>
    </div>
    </div>


</template>

<script>
  export default {

    name: "Conversor",
    props:     
     [
        "moedaB",
     ],

    data(){
        return {
            moedaA_value: "5",
            moedaB_value: "",
            DePara: "",
            moedaA: "5",
        }
    },

    methods: {


        converter(){
            const DePara = this.moedaA + "_" + this.moedaB;
            const url = 
            "https://free.currconv.com/api/v7/convert?q="+
             DePara 
             +"&compact=ultra&apiKey=XXX";

        fetch(url)
            .then(res => {
            return res.json();
            })
             .then(json => {       
                    const cotacao = json[DePara];
                    this.moedaB_value = (cotacao * parseFloat(this.moedaA_value)).toFixed(
                        2
                );
                });


        }
    }



};
  
</script>

<style scoped>

.seletor{
    padding: 20px;
    max-width: 300px;
    display: flex;
    


}
.box {
    padding: 20px;
    max-width: 600px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 5.2);  
    background-color: rgb(207, 207, 207);
    display: flex;
    margin-left: 200px;
    background-image: url('~/assets/img/fundo.png');
    background-position: 0 -50px;
    background-size: cover;
    
}

.outro {
    padding: 20px;
    max-width: 300px;
    display: center;
}

h1 {
    color: rgb(255, 255, 255);
    padding: 8px;
    margin-left: 10px;
    font-family:monospace;
}


h2 {
    color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    text-shadow: 0 10px 10px 0 rgba(0, 0, 0, 5.2);   
}

</style>

标签: javascripthtmlvue.js

解决方案


推荐阅读