Update a value in an axios URL in VueJS

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>

Neha Soni · Accepted Answer · 2023-02-11 06:20:39Z

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>

answered Feb 11, 2023 at 6:20

Neha Soni

4,7623 gold badges19 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user13928344 Over a year ago

Thanks @Neha Soni. This solved the issue. I would have preferred the param just to update, but this did not seem to work.

Edmon Belchev · Accepted Answer · 2023-02-10 12:35:36Z

1

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

answered Feb 10, 2023 at 12:35

Edmon Belchev

3973 silver badges11 bronze badges

Comments

Amini · Accepted Answer · 2023-02-10 11:44:37Z

0

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>

answered Feb 10, 2023 at 11:44

Amini

1,8121 gold badge13 silver badges33 bronze badges

1 Comment

user13928344 Over a year ago

Thanks @Amini. This just brings back 0 results unfortunately/

Álvaro · Accepted Answer · 2023-02-10 11:48:50Z

0

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

answered Feb 10, 2023 at 11:48

Álvaro

3226 silver badges18 bronze badges

1 Comment

user13928344 Over a year ago

Thanks@Álvaro. this wont work for me as the URL does not change. But thanks for your input.

Collectives™ on Stack Overflow

Update a value in an axios URL in VueJS

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related