Update a value in an axios URL in VueJS - vue.js

Question

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>

Answer 1

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>

Answer 2

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
}
});

Answer 3

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>

Answer 4

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