Пагинация в Vue js & Laravel теряет страницу после отправки формы - PullRequest
Новая
       13

Пагинация в Vue js & Laravel теряет страницу после отправки формы

0 голосов
/ 10 мая 2019

У меня проблема с отслеживанием текущей страницы нумерации страниц после отправки формы.

У меня есть веб-приложение, встроенное в vue js и laravel. Проблема в части API, которая управляет пользователем. Контроллер Laravel получает и разбивает на страницы всех пользователей из базы данных, а затем vue js отображает разбитые на страницы результаты. Веб-страница также позволяет модератору открывать форму и редактировать информацию о каждом отдельном пользователе. Проблема заключается в том, что отправка формы сбрасывает переменную страницы и после перезагрузки страницы попадает на страницу 1 вместо страницы, на которой была открыта всплывающая форма. Я предполагаю, что это вопрос передачи переменной под названием "page" с формой, но я новичок с vue js и не могу заставить его работать: (

Контроллер 

public function index()
    {
        return User::orderBy('name','asc')->paginate(10);
     }

Vue JS компонент, отображающий кнопки нумерации страниц 

<div class="card-footer">
     <pagination :data="users" @pagination-change-page="getResults"></pagination>
</div>

Vue js компонент, отправка формы «отредактировать пользователя» 

<form @submit.prevent="editmode ? updateUser() : createUser()">
    ... (generic form code)
    <button v-show="editmode" type="submit" class="btn btn-success">update</button>
</form>

Методы Vue JS 

methods:{
            getResults(page = 1) {
                axios.get(base_path+'/admin_api/user?page=' + page)
                    .then(response => {
                        this.users = response.data;
                    });
            },
            loadUsers(page = 1){

                this.$Progress.start()
                    axios.get(base_path+'/admin_api/user?page=' + page).then(({data}) => (this.users = data));
                this.$Progress.finish()
            },
           updateUser(){
             this.$Progress.start()
             this.form.put(base_path+'/admin_api/user/'+this.form.id)
                 .then(()=>{
                     Fire.$emit('AfterCreate')
                     $('#addNewModal').modal('hide');
                     toast({
                         type: 'success',
                         title: 'Benutzer erfolgreich aktualisiert'
                     })
                     this.$Progress.finish()
                   })
                 .catch(()=>{
                     this.$Progress.fail()
                 })
          }
        },
}

created(page=1){
             ...
              this.loadUsers(page)
              Fire.$on('AfterCreate',()=>{
                  this.loadUsers(page)
              })
              Fire.$on('AfterDelete',()=>{
                  this.loadUsers(page)
              })
}

Изменение страницы по умолчанию = 1 на другое число успешно меняет значение по умолчанию. Но желаемые результаты пребывания на текущей странице не помогли мне.

Заранее спасибо!

1 Ответ

0 голосов
/ 10 мая 2019

Предполагая, что в ваших полях формы используются v-model или аналогичные привязки с vue (как и следовало бы, чтобы вы могли использовать возможности Vue), вы можете удалить событие @submit на form HTML-тег и пусть vue обрабатывает событие нажатия на кнопку. 

<form>
    <input type="text" v-model="user.firtName"/>
    ... (generic form code)
    <button v-show="editmode" type="button" class="btn btn-success" @click="editmode ? updateUser() : createUser()">update</button>
</form>

Обратите внимание, что type теперь кнопка вместо отправки. После того, как updateUser или createUser выполнят свое дело, просто отправьте событие из модального в родительский компонент, чтобы прекратить модальное. 

updateUser(){
    this.$Progress.start()
    // Use Axios HERE, something like
    axios.put(base_path+'/admin_api/user/'+this.form.id, this.user)
        .then(()=>{
            // ...
        })
        .catch(()=>{
            this.$Progress.fail()
        })
        .finally(() => {
            this.$emit('closeModal');
        })
}
...