当前位置：首页 > VUE

问卷vue如何实现

2026-01-18 02:22:00VUE

在Vue中实现问卷功能

使用Vue框架可以高效地构建动态问卷系统，主要依赖组件化开发和响应式数据绑定。以下是具体实现方法：

基础结构搭建

创建Vue项目后，设计问卷的数据结构。通常使用一个数组存储问题列表，每个问题包含标题、类型和选项等属性。数据模型示例：

data() {
  return {
    questions: [
      {
        id: 1,
        title: "您的年龄段是？",
        type: "radio",
        options: ["18岁以下", "18-25岁", "26-35岁", "36岁以上"]
      },
      {
        id: 2,
        title: "请选择您喜欢的品牌（多选）",
        type: "checkbox",
        options: ["Nike", "Adidas", "Puma", "New Balance"]
      }
    ],
    answers: {}
  }
}

动态渲染问题组件

通过v-for指令循环渲染问题列表，根据type字段动态切换不同输入组件：

问卷vue如何实现

<template>
  <div v-for="question in questions" :key="question.id">
    <h3>{{ question.title }}</h3>
    <div v-if="question.type === 'radio'">
      <label v-for="(option, index) in question.options" :key="index">
        <input type="radio" 
               :name="'q'+question.id" 
               :value="option"
               v-model="answers[question.id]">
        {{ option }}
      </label>
    </div>
    <div v-else-if="question.type === 'checkbox'">
      <label v-for="(option, index) in question.options" :key="index">
        <input type="checkbox" 
               :value="option"
               v-model="answers[question.id]">
        {{ option }}
      </label>
    </div>
  </div>
</template>

表单验证与提交

添加验证逻辑确保必填问题已完成，通过计算属性检查答案完整性：

computed: {
  isFormValid() {
    return this.questions.every(q => {
      if (q.required) {
        return this.answers[q.id] && 
              (Array.isArray(this.answers[q.id]) ? 
               this.answers[q.id].length > 0 : true)
      }
      return true
    })
  }
}

提交时处理数据并发送到后端：

问卷vue如何实现

methods: {
  submitForm() {
    if (!this.isFormValid) return alert("请完成所有必填问题")
    axios.post('/api/survey', { answers: this.answers })
      .then(response => {
        console.log('提交成功', response.data)
      })
  }
}

高级功能扩展

实现问题逻辑跳转，根据当前答案动态显示后续问题：

watch: {
  answers: {
    deep: true,
    handler(newVal) {
      this.questions.forEach(q => {
        if (q.showIf) {
          this.$set(q, 'isVisible', q.showIf(newVal))
        }
      })
    }
  }
}

添加进度条显示完成度：

<template>
  <div class="progress-bar">
    <div :style="{ width: completionRate + '%' }"></div>
  </div>
</template>

<script>
computed: {
  completionRate() {
    const answered = this.questions.filter(q => 
      this.answers[q.id] !== undefined).length
    return (answered / this.questions.length) * 100
  }
}
</script>