[Vuejs]-How to re-render a vue.js component when a variable change

by

3👍

✅

If you want to perform the sorting in the backend, you are half way there (I found the page part confusing so I temporarily removed it from my demo below).

  1. Create a method that fires the HTTP call (Done per method get_books)
  2. Create a watcher that listens for changes in the value of sorting.
  3. Use the watcher to fire off the HTTP call again
<template>
<!-- Other stuff -->
<select v-model="sorting">
  <option value="prop1">Prop 1</option>
  <option value="prop2">Prop 2</option>
</select>
<!-- Other stuff -->
</template>

<script>
watch: {
  sorting(newVal, oldVal) {
    this.get_books(newVal)
  }
},
mounted() {
  this.get_books(this.sorting)
},
methods: {
  get_books(sort) {
        axios.get(`load_all_audio_books/${sort`).then(response=> {
            $.each(response.data.data, (key, v) => {
                this.audio_books.push(v);
                if (response.data.current_page==response.data.last_page){
                    this.last_page=true;
                }

            });
        })
    },
}
</script>

Watchers are one solution. You could do this in a multiple different ways.

👤Riza Khan

0👍

I solved it by adding these two line to the function that changes the value of the variable "sorting"

change_sort(sort)
    {
        this.page=1;
        this.sorting=sort;
        //the first line empty the audio_books array
        this.audio_books=[];
        //the second line call the function that get the data from the 
        //back end with the new sorting value then repopulate the 
       //audio_books array with the new values 
        this.get_books();
       

    }
👤mohammad abd elhady

Leave a comment