vue实现问卷

Vue 实现问卷系统

使用 Vue 实现问卷系统可以通过组件化开发、动态表单绑定和数据管理来实现。以下是关键步骤和代码示例：

基础项目结构

安装 Vue 和必要依赖（如需要状态管理可添加 Vuex）：

npm install vue@next vue-router

问卷组件设计

创建动态问题组件 Question.vue：

<template>
  <div class="question">
    <h3>{{ question.text }}</h3>
    <div v-if="question.type === 'radio'">
      <label v-for="option in question.options" :key="option">
        <input 
          type="radio" 
          v-model="selectedAnswer" 
          :value="option"
        >
        {{ option }}
      </label>
    </div>
    <div v-else-if="question.type === 'checkbox'">
      <label v-for="option in question.options" :key="option">
        <input 
          type="checkbox" 
          v-model="selectedAnswers" 
          :value="option"
        >
        {{ option }}
      </label>
    </div>
    <input 
      v-else 
      type="text" 
      v-model="selectedAnswer"
      placeholder="请输入答案"
    >
  </div>
</template>

<script>
export default {
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedAnswer: '',
      selectedAnswers: []
    }
  }
}
</script>

问卷页面集成

主问卷页面 Survey.vue：

<template>
  <div class="survey">
    <Question 
      v-for="(q, index) in questions" 
      :key="index" 
      :question="q"
      @update:answer="updateAnswer(index, $event)"
    />
    <button @click="submitSurvey">提交问卷</button>
  </div>
</template>

<script>
import Question from './Question.vue'

export default {
  components: { Question },
  data() {
    return {
      questions: [
        {
          text: "您的年龄段是？",
          type: "radio",
          options: ["18岁以下", "18-25岁", "26-35岁", "36岁以上"]
        },
        {
          text: "您喜欢哪些编程语言？（多选）",
          type: "checkbox",
          options: ["JavaScript", "Python", "Java", "C++"]
        },
        {
          text: "请留下您的建议：",
          type: "text"
        }
      ],
      answers: []
    }
  },
  methods: {
    updateAnswer(index, answer) {
      this.$set(this.answers, index, answer)
    },
    submitSurvey() {
      console.log('提交的答案:', this.answers)
      // 这里添加提交到后端的逻辑
    }
  }
}
</script>

状态管理（可选）

对于复杂问卷系统，可使用 Pinia/Vuex 管理状态：

// stores/survey.js (Pinia示例)
import { defineStore } from 'pinia'

export const useSurveyStore = defineStore('survey', {
  state: () => ({
    questions: [],
    currentAnswers: []
  }),
  actions: {
    async loadQuestions() {
      // 从API加载问题
    },
    saveAnswer(questionId, answer) {
      // 保存答案逻辑
    }
  }
})

路由配置

在 router/index.js 中配置问卷路由：

const routes = [
  {
    path: '/survey',
    component: () => import('../views/Survey.vue')
  }
]

样式优化

添加基础样式增强用户体验：

/* Survey.vue 样式部分 */
.survey {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.question {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
}
button {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

进阶功能实现

分页问卷加载：

// 在Survey.vue的data中添加
currentPage: 0,
pageSize: 3,

// 计算属性
paginatedQuestions() {
  const start = this.currentPage * this.pageSize
  return this.questions.slice(start, start + this.pageSize)
}

表单验证：

// Question.vue中添加
watch: {
  selectedAnswer(val) {
    this.$emit('validate', !!val)
  }
}

后端集成示例

使用 axios 提交数据：

methods: {
  async submitSurvey() {
    try {
      const response = await axios.post('/api/survey', {
        answers: this.answers
      })
      console.log('提交成功', response.data)
    } catch (error) {
      console.error('提交失败', error)
    }
  }
}

该实现提供了问卷系统的核心功能，包括动态问题渲染、答案收集和提交。可根据实际需求扩展问题类型、添加跳转逻辑或结果分析功能。