我正在制作一個在線考試網(wǎng)站。我每頁做了 1 個問題，我做了一個自定義分頁，但現(xiàn)在我不知道如何做，當(dāng)我轉(zhuǎn)到下一個問題時，我保存上一個問題的答案，以便我可以將所有答案提交到數(shù)據(jù)庫這是視圖代碼 <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>預(yù)期結(jié)果：提交所有答案 實際結(jié)果：僅提交最后一個答案**注意：我使用默認的 Laravel 分頁，但我使用 json 腳本和 axios 移動拋出分頁而不刷新頁面 **
1 回答
森林海
TA貢獻2011條經(jīng)驗 獲得超2個贊
如果我理解正確（并且您也在前端使用 Vue.js），我建議使用以下兩種方法之一：
使用 Vuex - 創(chuàng)建 1 個大 json 對象，該對象將在提交每一步后填充，最后通過 axios 將其發(fā)送到您的 API
有 1 個父組件在其數(shù)據(jù)中保存大對象，子組件將代表多步表單的當(dāng)前步驟。每個子步驟都應(yīng)驗證其輸入，然后將數(shù)據(jù)發(fā)送到父組件。來到最后一步后，只需發(fā)送來自父級的請求即可。
獎勵：我強烈建議您查看https://vuejs.org/v2/guide/components-dynamic-async.html以獲取帶有 keep alive 標(biāo)記的子組件，以防您也希望能夠進入上一步。
第二種方法的通用架構(gòu)（我沒有測試它，但你應(yīng)該得到大局）：
// 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>
- 1 回答
- 0 關(guān)注
- 233 瀏覽
添加回答
舉報
0/150
提交
取消