How to input Response to Button in Vue.js

Takis Paras 0
Viewed 44

index.html

<!DOCTYPE html>
<html lang="">
  <form>
    <label>Enter Currency: <input type="text"></label>
  
   <input type="submit" value="Submit">
</form>
</html>

app.vue

<script>
  //eslint-disable-next-line no-unused-vars
  import axios from 'axios'
export default {
 
  data: () => ({
    
    cryptos: [],
    errors: []

  }),

  created () {

    axios.get('https://api.coinbase.com/v2/prices/spot?currency=EUR')
    .then(response => {
    this.cryptos = response.data
    console.log(response)
  })
  .catch(e => {
    this.errors.push(e)
  })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

I got the following code in Vue.js and I want when I press Submit Button refresh the page and return the console.log(Response). I tried using this code but it returns me blank page even though when I go to chrome console I can see that the Values of Response are there but How can I display them to the page ?

console.log view vue.js javascript html
1 Answers

Suggestion :

  • You can use input type as button instead of submit to prevent the auto submit behavior.
  • Attach click event on the button and on click make the axios call to get the response and then bind that in the same page below the button.

But If You want to show the response in an another route then there are two possible solutions :

  1. Set the response data in the Vuex store on click and then fetch in the page where you want to show.
  2. pass the currency on click as a route param and then make an API call in the route where you want to display the results.

Here is the demo of how you can get the results and bind in the same component :

new Vue({
  el: '#app',
  data() {
    return {
      apiEndPoint : 'https://api.coinbase.com/v2/prices/spot?currency=',
      apiData: null,
      currency: 'EUR'
    }
  },
  created() {
    // This will invoke when page load with a default currency. here is am setting 'EUR'
    this.getData(this.currency);
  },
  methods: {
    getData(currency) {
      axios.get(`${this.apiEndPoint}${currency}`).then((response) => {
        this.apiData = response.data
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app">
  <form>
    <label>Enter Currency: <input type="text" v-model="currency"></label>
    <input type="button" value="Submit" @click="getData(currency)"/>
  </form>
  <p>Bitcoin Value is : {{ apiData?.data?.amount }}</p>
</div>

Rohìt Jíndal0
Related