Не удается перейти на следующую страницу с помощью нумерации страниц при загрузке - Vue - PullRequest
Новая
       20

Не удается перейти на следующую страницу с помощью нумерации страниц при загрузке - Vue

0 голосов
/ 13 апреля 2019

Я разрабатываю приложение vue, которое показывает таблицу.Мой бэкэнд API отправляет данные (25000 строк) в виде массива JSON.Я использую пример полной таблицы начальной загрузки для работы.Я вижу, что кнопка нумерации страниц в конце страницы не активирована.

Вот скриншот enter image description here

Вот мой компонент таблицы 


    
        <!-- User Interface controls -->
        
            
                
                    
                        
                        
                            Clear
                        
                    
                
            

            
                
                    
                        
                            -- none --
                        
                        
                            Asc Desc
                        
                    
                
            

            
                
                    
                        
                            Asc Desc
                            Last
                        
                    
                
            

            
                
                    
                
            
        

        <!-- Main table element -->
        
            
                {{ row.value.first }} {{ row.value.last }}
            

            
                {{ row.value ? 'Yes :)' : 'No :(' }}
            

            
                <!--<b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">-->
                    <!--Info modal-->
                <!--</b-button>-->
                
                    {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
                
            

            
                
                    
                        {{ key }}: {{ value }}
                    
                
            
        

        
            
                
            
        

        <!-- Info modal -->
        
            {{ modalInfo.content }}
импорт axios из 'axios';экспорт по умолчанию {name: "Table", data () {return {items: [], поля: [{key: 'ticket', метка: 'Ticket Id', sortable: true, sortDirection: 'desc'}, {key: 'Requestor', метка: 'Requestor Id', сортируемый: true, класс: 'text-center'}, {key: 'ITOwner', метка: 'IT Owner Id', sortable: true}, {key: 'FiledAgainst', метка:' Filed Against ', сортируемый: true}, {ключ:' TicketType ', метка:' Ticket Type ', сортируемый: true}, {key:' Severity ', метка:' Severity ', сортируемая: true}, {ключ: «Приоритет», метка: «Приоритет», сортируемый: истина}, {ключ: «Дата создания билета», метка: «Дата создания», сортируемый: истина}, {ключ: «действия», метка: «Actions '}], totalRows: 1, currentPage: 1, perPage: 5, pageOptions: [5, 10, 15], sortBy: null, sortDesc: false, sortDirection:' asc ', filter: null, modalInfo: {title:'', content: ''}}}, computed: {sortOptions () {// Создать список параметров из наших полей и вернуть this.fields .filter (f => f.sortable) .map (f => {return {текст: f.label, значение: f.key}})}}, смонтированный (){// Установить начальное количество элементов this.totalRows = this.items.length axios .get ('http://localhost:3000/ticket') .then (response => (this.items = response.data));}, методы: {info (item, index, button) {this.modalInfo.title = `Индекс строки: $ {index}` this.modalInfo.content = JSON.stringify (item, null, 2) this. $ root.$ emit ('bv :: show :: modal', 'modalInfo', button)}, resetModal () {this.modalInfo.title = '';this.modalInfo.content = ''}, onFiltered (FilterItems) {// Запуск разбивки на страницы для обновления количества кнопок / страниц из-за фильтрации this.totalRows = FilterItems.length this.currentPage = 1}}}

Что мне нужно сделать, чтобы разобраться в проблеме

...