vue添加答题功能

最新推荐文章于 2024-11-05 11:22:39 发布

嫣嫣细语

最新推荐文章于 2024-11-05 11:22:39 发布

阅读量751

点赞数

分类专栏： vue.js 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/132719332

版权

前段时间项目要求添加一个答题功能，所以答题之前，要求创建答题题库。网上找了许多关于答题功能，最终，形成如下图所示答题要求，但适用于单选题和多选题，填空题不适用。
1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。
2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题
3.可以根据需要删除对应的答题选项，添加新答题类型

本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创建是E选项。再或者就是ABCD四个选项位置删除任意一个后，顺序被打乱等，不过，好在最后解决了，就是多写好几行代码，有点繁琐。

具体代码如下

<template>
  <div class="addquestion">
    <div class="question-title">
      <span>{
  {title}}</span>
      <span class="back" style="font-size: 18px;" @click="back()">返回</span>
    </div>
    <div class="question_body">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="content"
          label="题目内容"
          :rules="[{ required: true, message: '请输入题目内容', trigger: 'blur' }]"
        >
          <span v-if="keyword=='show'">{
  {dynamicValidateForm.content}}</span>
          <el-input type="textarea" v-if="keyword!='show'" v-model="dynamicValidateForm.content"></el-input>
        </el-form-item>
        <div class="domains_fileds">
          <div class="domain_title">
            <span>答题选项：</span>
            <el-button
              @click="addDomain"
              v-if="keyword!='show'"
              style="background:#409EFF;color:white"
            >新增答题类型</el-button>
          </div>
          <el-form-item
            v-for="(domain,index) in dynamicValidateForm.domains"
            :label="domain.id"
            :key="domain.id"
            :prop="'domains.' + index + '.value'"