OnChange page rows using VueJS and axiosJS not working

Question

Context: Implementing Page Rows using VueJS and AxiosJS to allow users to select the number of rows to display on a table.

Problem: When selecting onChange from the dropDown box, the table rows do not change, whereas the console.log shows the correct number of records and data.

Ask: I need help to figure out what I am doing wrong.

Code JavaScript:

function get_trips_all(){
    // Initialize areas of display
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');
    const shipperid = urlParams.get('shipperid');
    const customerid = urlParams.get('customerid');
    let pagesize = document.getElementById('trip-pagination').options[document.getElementById('trip-pagination').selectedIndex].value;
    console.log('pagesize: '+pagesize);
    // Check token
    if(typeof token === 'undefined' || token === null){
        // redirect to login page
        window.location.href = loginPath;
    }else{
        
        new Vue({
            el: '#view-all-trips',
            data() {
                return {
                    isLoaded: false,
                    view_all_trips: [],
                    recordCount: 0,
                    pagesize: pagesize
                    
                };
                
            },
           mounted(){
                    
                    axios({
                        method: 'get',
                        url: apiClient+'/web/trips/all', 
                        params: {
                            'token': token,
                            'shipperid': shipperid,
                            'customerid': customerid,
                            'pagesize': pagesize
                        },
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
                            'Access-Control-Allow-Origin': apiClient,
                            'Access-Control-Allow-Headers': '*',
                            'Accept': 'application/json, text/plain;charset=UTF-8',
                        },
                        Vary: 'Origin'
                    })
                    
                    .then(response => {
                        this.isLoaded = true;
                        this.view_all_trips = response.data.trips;
                        this.recordCount = response.data.recordcount;
                    }
                    )
                    .then(
                        function(){
                            document.getElementById('trip-pagination').value = pagesize
                        }
                    )
                    .catch(
                        function (error) {
                            console.log(error);
                        });
                
            }
        });
        
    }
}

HTML

 
                                   
                                    
                                        
                                            
                                                Reference
                                                Loading Location
                                                Destination
                                                Customer
                                                Shipper
                                                Loading date
                                                Dispatch date
                                                Trucks requested
                                                Proposed rate (USD)
                                                Active since
                                                Status
                                                Actions
                                            
                                        
                                        
                                            
                                                {{trip.reference}}
                                                
                                                    {{trip.pickup_location}}
                                                
                                                
                                                    {{trip.dropoff_location}}
                                                
                                                
                                                    {{trip.customername}}
                                                
                                                
                                                    {{trip.shippername}}
                                                
                                                
                                                    {{trip.loaded_date}}
                                                
                                                
                                                    {{trip.dispatch_date}}
                                                
                                                
                                                    {{trip.truck_requested}}
                                                
                                                
                                                    {{trip.propposed_rate}}
                                                
                                                
                                                    {{trip.trip_date_created}}
                                                
                                                
                                                    {{trip.trip_status}}
                                                    {{trip.trip_status}}

user_1318694 · Answer

Rely on Vue for the interactive features, it's designed to make those easier than using things like getElementById lookups.

The select component can assign the variable directly on change


  Page size is {{pagesize}}

Then the request code can use this.pagesize directly instead of looking it up.

  data() {
    return {
      pagesize: 5,
    };
  },
  mounted(){
    this.fetchData()
  },
  watch: {
    pagesize: function pagesize(new_val, old_val) {
      console.log('pagesize changed', new_val, old_val)
      this.fetchData()
    },
  },
  methods: {
    async fetchData(){
      console.log('fetch pagesize', this.pagesize)
    },
  },

OnChange page rows using VueJS and axiosJS not working

1 Answers