Как изменить свойство страницы при изменении свойства rowPerPage

Question

У меня возникают проблемы с выяснением, как изменить свойство vuetify pagination.page обратно на 1, когда пользователь изменяет свойство rowPerPage.

Скажем, в наборе результатов всего 23 строки иrowPerPage в настоящее время имеет значение 10. Если пользователь переходит на 3-ю (последнюю) страницу, а затем выбирает 50 rowPerPage, vue вызывает мой ajax-запрос, чтобы получить новые данные с внутреннего сервера, но он передает rowPerPage как 50 и передает страницу как 3.

Поскольку это приводит к тому, что свойство смещения sql становится равным 100, что намного больше, чем 23 записи в таблице, оно не возвращает никаких данных, поэтому экран перерисовывается без записей.

Что бы я хотел сделать, чтобы это исправить, когда свойство rowPerPage изменится, сбросьте свойство страницы обратно на 1.

Я набрал в кучу гугл, но не могу найти ответ.Я пытаюсь решить эту проблему неверным способом?

Редактировать: Вот пример кода моего рельса:

<v-card flat>                                                                                                                                                   
    <v-card-title class="pt-0 pb-0">                                                                                                                              
        <h2>No RSP/Participating Apps</h2>                                                                                                                          
        <%= render :partial => "search" %>                                                                                                                          
        <%= render :partial => "rows_per_page" %>                                                                                                                   
    </v-card-title>                                                                                                                                               
    <v-data-table                                                                                                                                                   
        :headers="headers"                                                                                                                                            
        :items="results"                                                                                                                                              
        :pagination.sync="pagination"                                                                                                                                 
        hide-actions                                                                                                                                                  
        :total-items="totalItems"                                                                                                                                     
        :must-sort=true                                                                                                                                               
        :search="pagination.search"                                                                                                                                   
    >
        ...                                                                                                                                                               
    </v-data-table>  
    <div class="text-xs-center pt-2">                                                                                                                             
        <v-pagination v-model="pagination.page" :length="pages"></v-pagination>                                                                                     
    </div>                                                                                                                                                        
</v-card>                                                                                                                                                       

И мой код JS:

data: {                                                                                                                                                       
    search: '',                                                                                                                                                 
    drawer: null,                                                                                                                                               
    miniVariant: false,                                                                                                                                         
    loading: true,                                                                                                                                              
    totalItems: 0,                                                                                                                                              
    results: [],                                                                                                                                                
    pagination: {                                                                                                                                               
        rowsPerPage: 10,                                                                                                                                          
    },                                                                                                                                                          
    rowsPerPageChoices: [                                                                                                                                       
        { text: '2 rows per page', value: 2 },                                                                                                                    
        { text: '5 rows per page', value: 5 },                                                                                                                    
        { text: '10 rows per page', value: 10 },                                                                                                                  
        { text: '20 rows per page', value: 20 },                                                                                                                  
        { text: '30 rows per page', value: 30 }                                                                                                                  
    ],                                                                                                                                                          
},
methods: {                                                                                                                                                    
    commonQueryParams() {                                                                                                                                       
        return '?sortBy=' + this.pagination.sortBy +                                                                                                              
            '&descending=' + this.pagination.descending +                                                                                                      
            '&page=' + this.pagination.page +                                                                                                                  
            '&rowsPerPage=' + this.pagination.rowsPerPage +                                                                                                    
            '&onlyTotal=0' +                                                                                                                                   
            '&filter=' + this.search;                                                                                                                          
    },                                                                                                                                                          
    queryParams() {                                                                                                                                             
        return this.commonQueryParams();                                                                                                                          
    },                                                                                                                                                          
    getData() {                                                                                                                                                 
        this.loading = true;                                                                                                                                      
        axios.get(this.dataApiUrl + '/' + this.dataEndPoint + this.queryParams(), {withCredentials: true})                                                        
            .then(response => {                                                                                                                                     
                this.results = response.data.data;                                                                                                                    
                this.totalItems = response.data.control_data.total;                                                                                                   
                this.loading = false;                                                                                                                                 
            });                                                                                                                                                     
    },                                                                                                                                                          
},                                                                                                                                                            
computed: {                                                                                                                                                   
    pages () {                                                                                                                                                  
        return this.pagination.rowsPerPage ? Math.ceil(this.totalItems / this.pagination.rowsPerPage) : 0;                                                        
    }                                                                                                                                                           
},                                                                                                                                                            
watch: {                                                                                                                                                      
    pagination: {                                                                                                                                               
        handler () {                                                                                                                                              
            this.getData();                                                                                                                                         
        },                                                                                                                                                        
        deep: true                                                                                                                                                
    },                                                                                                                                                          
    search: _.debounce(function () {                                                                                                                            
        this.getData()                                                                                                                                            
    }, 500),                                                                                                                                                    
}                                                                                                                                                             

Answer 1

Итак, я нашел решение, которое, кажется, делает то, что я хочу. Сначала я добавил новый атрибут данных:

oldRowsPerPage: 10

Я установил это значение на 10, потому что это значение по умолчанию для атрибута pagination.rowsPerPage.

Затем я изменил метод getData, чтобы он выглядел так:

getData() {                                                                                                                                                 
    if (this.pagination.rowsPerPage != this.oldRowsPerPage) {                                                                                                 
        this.oldRowsPerPage = this.pagination.rowsPerPage;                                                                                                      
        this.pagination.page = 1;                                                                                                                               
    }                                                                                                                                                         

    this.loading = true;                                                                                                                                      
    axios.get(this.dataApiUrl + '/' + this.dataEndPoint + this.queryParams(), {withCredentials: true})                                                        
        .then(response => {                                                                                                                                     
            this.results = response.data.data;                                                                                                                    
            this.totalItems = response.data.control_data.total;                                                                                                   
            this.loading = false;                                                                                                                                 
        });                                                                                                                                                     
},                                                                                                                                                          

Условное начало метода проверяет, было ли изменено значение pagination.rowsPerPage. Если это так, мы устанавливаем для атрибута oldRowsPerPage то же значение, а затем мы изменяем атрибут pagination.page на 1. Это приведет к тому, что запрос сбросит смещение, так что он начнет возвращать записи с начала набора результатов, и он будет также измените таблицу данных vuetify так, чтобы она отображала первую страницу набора результатов, вместо того, чтобы продолжать пытаться показать страницу, на которой была таблица данных, в данный момент, когда пользователь выбрал новый выбор pagination.rowsPerPage.