如何制作多页表格

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），我建议使用以下两种方法之一：

1. 使用 Vuex - 创建 1 个大 json 对象，该对象将在提交每一步后填充，最后通过 axios 将其发送到您的 API

2. 有 1 个父组件在其数据中保存大对象，子组件将代表多步表单的当前步骤。每个子步骤都应验证其输入，然后将数据发送到父组件。来到最后一步后，只需发送来自父级的请求即可。

奖励：我强烈建议您查看https://vuejs.org/v2/guide/components-dynamic-async.html以获取带有 keep alive 标记的子组件，以防您也希望能够进入上一步。

第二种方法的通用架构（我没有测试它，但你应该得到大局）：

// Parent.vue

<template>

  <div>

    <keep-alive>

      <component v-bind:is="actualStep" @stepSubmitted="handleStepSubmitted"></component>

    </keep-alive>

  </div>

</template>

<script>

export default {

  components: {

    Step1: () => import("./Step1"),

    Step2: () => import("./Step2")

  },

  data() {

    return {

      resultToSend: [],

      formSteps: ["Step1", "Step2"],

      actualStep: "Step1"

    };

  },

  methods: {

    handleStepSubmitted(dataFromStep) {

      resultToSend.push(dataFromStep);

      if (formSteps.indexOf(actualStep) === formSteps.length - 1) {

        this.submitData();

      } else {

        this.actualStep = this.nextStep();

      }

    },

    nextStep() {

      return this.formSteps[this.formSteps.indexOf(actualStep) + 1];

    },

    submitData() {

      // send your post request

    }

  }

};

</script>

// Step1.vue 

<template>

  <div>

    <input v-model="data1" type="text" />

    <button @click="submitstep">Next</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      data1: ""

    };

  },

  methods: {

    submitStep() {

      this.$emit("stepSubmitted", data1);

    }

  }

};

</script>

// Step2.vue 

<template>

  <div>

    <input v-model="data2" type="text" />

    <button @click="submitstep">Next</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      data2: ""

    };

  },

  methods: {

    submitStep() {

      this.$emit("stepSubmitted", data2);

    }

  }

};

</script>