当前位置：首页 > VUE

vue实现试题录入

2026-02-17 11:06:02VUE

Vue 实现试题录入功能

数据模型设计

试题数据通常包含题目内容、选项、答案、难度等信息。使用Vue的data属性定义试题对象：

data() {
  return {
    question: {
      title: '',
      type: 'single', // single/multiple
      options: [
        { text: '', isAnswer: false },
        { text: '', isAnswer: false }
      ],
      difficulty: 1
    }
  }
}

动态选项管理

通过v-for动态渲染选项，并实现增删功能：

<div v-for="(option, index) in question.options" :key="index">
  <input v-model="option.text" placeholder="选项内容">
  <input type="checkbox" v-model="option.isAnswer">
  <button @click="removeOption(index)">删除</button>
</div>
<button @click="addOption">添加选项</button>

表单验证

使用计算属性或watch进行基本验证：

computed: {
  isValid() {
    return this.question.title.trim() && 
           this.question.options.some(opt => opt.isAnswer)
  }
}

提交处理

通过axios提交数据到后端API：

vue实现试题录入

methods: {
  submitQuestion() {
    if (!this.isValid) return alert('请完善题目信息');
    axios.post('/api/questions', this.question)
      .then(() => {
        this.resetForm();
        alert('提交成功');
      })
  },
  resetForm() {
    this.question = { /* 重置数据 */ }
  }
}

完整组件示例

<template>
  <div class="question-editor">
    <textarea v-model="question.title" placeholder="题目内容"></textarea>

    <select v-model="question.type">
      <option value="single">单选题</option>
      <option value="multiple">多选题</option>
    </select>

    <div v-for="(opt, i) in question.options" :key="i">
      <input v-model="opt.text">
      <input type="checkbox" v-model="opt.isAnswer">
      <button @click="removeOption(i)">×</button>
    </div>

    <button @click="addOption">+ 添加选项</button>
    <button @click="submitQuestion" :disabled="!isValid">提交</button>
  </div>
</template>