Question

提交表单后，我在跟踪分页的当前页面时遇到问题。

我有一个Web应用程序，内置了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更改为其他数字会成功更改默认值。但是，留在当前页面上的想要的结果对我来说不起作用。

谢谢！

Answer 1

假设您的表单字段正在使用v-model或具有vue的相似绑定（应该这样，以便您可以利用Vue的功能），则可以删除@submit事件在form html标签上，让vue处理按钮上的click事件。

<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');
        })
}

提交表单后，Vue js和Laravel中的分页丢失了页面跟踪

1 个答案: