CODEWITHSUNDEEP
vue.jsaxios
user13928344
user13928344

Reputation: 216

Update a value in an axios URL in VueJS

I am trying to update 'this.counts' value in my axios called URL when a button is clicked. Can anyone help me to work this out? Thanks

.get(
          "https://myurl/results.json" +
            query +
            `&num_ranks=$**{this.counts}**` 

data: function () {
    return {
      counts: 2
};

methods: {
    //number added to the Axios URL to display load more results
    loadMore() {
      if (this.loadMore) {
        this.counts += 10;
      }
    },
}   

 <button                
            @click="loadMore">
            Load more {{ counts }}
          </button>

Upvotes: 0

Views: 443

Answers (4)

Neha Soni
Neha Soni

Reputation: 4694

One thing I found missing is, that on the counts variable's update, the Axios API should be re-triggered to fetch the new response. And if your re-triggering it then it should work. You might need to check your API then.

Here is a dummy API demo that is taking counts as the query param and fetching the response every time on the counts variable's update.

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data() {
    return {
      counts: 0
    }
  },
  methods: {
    loadMore() {
      if (this.loadMore) {
        this.counts += 1;
        this.getMore()
      }
    },
    getMore() {
      console.clear()
      // Axios call here
      axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${this.counts}`).then(res => {
       console.log(res)
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js" integrity="sha512-NCiXRSV460cHD9ClGDrTbTaw0muWUBf/zB/yLzJavRsPNUl9ODkUVmUHsZtKu17XknhsGlmyVoJxLg/ZQQEeGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="loadMore">Load more {{ counts }}</button>
</div>

Upvotes: 1

Edmon Belchev
Edmon Belchev

Reputation: 357

What you need is using params in your axios call.

axios.get('https://myurl/results.json', { params: { num_ranks: this.counts } });

parameters will append to the url your are calling. If you have more parameters just put them in params: {...}

axios.get('https://myurl/results.json', { 
 params: { 
  param1: this.result, 
  param2: this.result2, 
  param3: this.result3 
 } 
});

Upvotes: 1

&#193;lvaro
&#193;lvaro

Reputation: 322

You can use URLSearchParams to get the url param by name and modify in your code. Something like this:

const url = window.location.href // get the url from current page
const searhParams = new URLSearchParams(url);
if (searchParams.has('name of the param in url')) {
 let count = searchParams.get('param in url');
 loadMore(count); // you pass as a param to loadMore function or do it inside that function
}

Here's the doc for more help: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Upvotes: 0

Amini
Amini

Reputation: 1792

Create a specific function for axios API request and call it whenever the button clicked. (Call it in loadMore().)

<template>
  <button @click="loadMore">Load more {{ counts }}</button>
</template>

<script>
export default {
  data() {
    return {
      counts: 0
    }
  },
  methods: {
    loadMore() {
      if (this.loadMore) {
        this.counts += 10;
        this.getMore()
      }
    },
    getMore() {
      // Axios call here
      axios.get("https://myurl/results.json" + query + `&num_ranks=$**{this.counts}**`)
    }
  }
}
</script>

Upvotes: 0

Related Questions