如何制作多页表格

Question

我正在制作一个在线考试网站。我每页做了 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 移动抛出分页而不刷新页面 **

Answer 1

如果我理解正确（并且您也在前端使用 Vue.js），我建议使用以下两种方法之一：使用 Vuex - 创建 1 个大 json 对象，该对象将在提交每一步后填充，最后通过 axios 将其发送到您的 API有 1 个父组件在其数据中保存大对象，子组件将代表多步表单的当前步骤。每个子步骤都应验证其输入，然后将数据发送到父组件。来到最后一步后，只需发送来自父级的请求即可。奖励：我强烈建议您查看https://vuejs.org/v2/guide/components-dynamic-async.html以获取带有 keep alive 标记的子组件，以防您也希望能够进入上一步。第二种方法的通用架构（我没有测试它，但你应该得到大局）：// Parent.vue<template>&nbsp; <div>&nbsp; &nbsp; <keep-alive>&nbsp; &nbsp; &nbsp; <component v-bind:is="actualStep" @stepSubmitted="handleStepSubmitted"></component>&nbsp; &nbsp; </keep-alive>&nbsp; </div></template><script>export default {&nbsp; components: {&nbsp; &nbsp; Step1: () => import("./Step1"),&nbsp; &nbsp; Step2: () => import("./Step2")&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; resultToSend: [],&nbsp; &nbsp; &nbsp; formSteps: ["Step1", "Step2"],&nbsp; &nbsp; &nbsp; actualStep: "Step1"&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; handleStepSubmitted(dataFromStep) {&nbsp; &nbsp; &nbsp; resultToSend.push(dataFromStep);&nbsp; &nbsp; &nbsp; if (formSteps.indexOf(actualStep) === formSteps.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; this.submitData();&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.actualStep = this.nextStep();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; nextStep() {&nbsp; &nbsp; &nbsp; return this.formSteps[this.formSteps.indexOf(actualStep) + 1];&nbsp; &nbsp; },&nbsp; &nbsp; submitData() {&nbsp; &nbsp; &nbsp; // send your post request&nbsp; &nbsp; }&nbsp; }};</script>// Step1.vue&nbsp;<template>&nbsp; <div>&nbsp; &nbsp; <input v-model="data1" type="text" />&nbsp; &nbsp; <button @click="submitstep">Next</button>&nbsp; </div></template><script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; data1: ""&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; submitStep() {&nbsp; &nbsp; &nbsp; this.$emit("stepSubmitted", data1);&nbsp; &nbsp; }&nbsp; }};</script>// Step2.vue&nbsp;<template>&nbsp; <div>&nbsp; &nbsp; <input v-model="data2" type="text" />&nbsp; &nbsp; <button @click="submitstep">Next</button>&nbsp; </div></template><script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; data2: ""&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; submitStep() {&nbsp; &nbsp; &nbsp; this.$emit("stepSubmitted", data2);&nbsp; &nbsp; }&nbsp; }};</script>