首页 > 解决方案 > 如何制作多页表格

问题描述

我正在制作一个在线考试网站。我每页做了 1 个问题,我做了一个自定义分页,但现在我不知道如何做,当我转到下一个问题时,我保存了上一个问题的答案,这样我就可以将所有答案提交给数据库

这是查看代码

     <form method="POST" action="{{route("answer.store")}}">
            @csrf
            <div class="content" v-for="question in questions">
                <div  v-if="post.qtype === 'choose'">
                <div class="font-weight-bold p-4"> @{{question.qname}}</div>
                <div v-for="choice in question.choices">
                <div class="p-4">
                <input type="radio" class="form-check-input" style="display: block" id="radio" :name="'answers[q' + post.id + '][]'" :value="choice">
                <label class="form-check-label"  for="radio">@{{choice}}</label>   
                </div>    
                </div>
                </div>
            </div>
            {{ Form::hidden('exam_id', Crypt::encrypt($exam->id)) }}
            <input class='btn btn-primary' v-if="pagination.current_page == pagination.last_page" id='submit-btn' type="submit">
            </form>

预期结果:提交所有答案实际结果:仅提交最后一个答案

**注意:我使用默认的 laravel 分页,但我使用 json 脚本和 axios 来移动 throw 分页而不刷新页面 **

标签: phplaravelvue.js

解决方案


您必须使用键值对创建一个数组,然后编写一个方法,在每次页面更改时将 id 和答案推送到数组中(如果用户想要返回并更改问题,那么您需要为此实现 CRUD 操作大批)。如果用户完成了最后一页,则使用 axios 将您的数组发布到您的数据库中。


推荐阅读