[Vuejs]-VueJS user mounted() on new click/reset component state?

by

0👍

Create a function that will make this request for you, that is, every time you click on the item it makes this request, and pass the data to the component through props. If you want to use this function in the mounted, just invoke it using this. Do not leave it tied inside the mounted, causing you to recharge the component every time, but link it through an event.

Example:

<div id="app">
  {{ info }}
    <button @click="getData">Get Data</button>
    <button @click="clear">clear</button>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  methods: {
    clear() {
      this.info = null
    },
    getData() {
      axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
           this.info = response
        })
      }
    },
  mounted() {
    this.getData()
  }
})

https://jsfiddle.net/hamiltongabriel/nazvruLj/7/

Leave a comment