vue 动态加载调查问卷的内容

前端用到了bootstrap-vue框架

<template><b-alert :show="dismissCountDown" fade :variant="alertType" @dismiss-count-down="countDownChanged"style="width: 20rem;height:3.5rem;position: fixed;top:0rem;bottom:0rem;left:0rem;right:0rem;margin: auto; z-index: 10000;">{{alertMsg}}b-alert><p style="margin: 0.5rem 0.25rem;"><b-list-group><b-list-group-item v-for="(item,index) in form.results" :key="index"><p class="text-dark">{{(index+1)+"、"+item.question}}p><div v-if="item.qtype=='填空'"><b-input v-model="item.value[0]">b-input>div><div v-if="item.qtype=='单选'"><b-form-group><b-form-radio-group v-model="item.value" :options="item.options.split(';')" :name="'Q'+item.dmid">b-form-radio-group>b-form-group><b-input v-if="item.value.includes('是')" v-model="item.more" placeholder="请补充说明">b-input>div><div v-if="item.qtype=='多选'"><b-form-checkbox-group v-model="item.value" :options="item.options.split(';')" :name="'Q'+item.dmid">b-form-checkbox-group>b-form-group>div><div v-if="item.qtype=='列表'"><b-form-select v-model="item.value" :options="item.options.split(';')" :name="'Q'+item.rmid">b-form-select>div>b-list-group-item>b-list-group><div style="text-align: center;"><b-button size="lg" pill variant="primary" class="mt-2" @click="submitForm()">提 交b-button>div>p>div>
template>

js代码

  export default {data() {return {dismissSecs: 3,dismissCountDown: 0,alertType: 'primary',alertMsg: '',form: {results: []}}},//预先加载题目内容。这里的小技巧是，根据从后台拉取过来的题目内容，为每道题增加value属性，用于保存用户选择的结果；增加more属性，用于保存用户备注的内容。mounted() {this.$axios.post("disciplineCollect.php", {act: 'getDisciplineItems'}).then(rs => {for (let item of rs.data.items) {this.form.results.push({'dmid': item.dmid,'qtype': item.qtype,'question': item.question,'options': item.options,'value': [],'more': ''})}})},methods: {countDownChanged(dismissCountDown) {this.dismissCountDown = dismissCountDown},submitForm() {let flag = true;this.form.results.forEach(function(data) {if ((!data.question.includes("选填")) && data.value.length < 1) {flag = false;}})if (flag == false) {this.dismissCountDown = this.dismissSecs;this.alertType = "warning"this.alertMsg = "有必填项未完成，请完善后再提交。"} else {this.dismissCountDown = this.dismissSecs;this.alertType = "primary"this.alertMsg = "正在提交，请稍候"this.$axios.post("disciplineCollect.php", {act: "add",sid: this.sid,data: this.form.results}).then(rs => {if (rs.data.code == 1) {alert("提交成功，再次感谢您的支持！")this.$router.replace({path: 'index?sid=' + this.sid})} else {this.dismissCountDown = this.dismissSecs;this.alertType = "danger"this.alertMsg = "提交失败，请检查后重试"}})}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！