当前位置：首页 > VUE

vue实现问卷调查

2026-01-12 01:38:35VUE

Vue 实现问卷调查的方法

使用 Vue CLI 创建项目

通过 Vue CLI 快速初始化一个 Vue 项目，确保已安装 Node.js 和 npm/yarn。

vue create survey-app
cd survey-app
npm install

安装问卷相关依赖

根据需求安装表单验证库（如 VeeValidate）或 UI 组件库（如 Element UI、Vant）。

npm install element-ui vee-validate

设计问卷数据结构

在 Vue 组件中定义问卷的问题和选项数据，通常使用数组或对象存储。

vue实现问卷调查

data() {
  return {
    questions: [
      {
        id: 1,
        type: 'radio',
        title: '您的年龄段是？',
        options: ['18岁以下', '18-25岁', '26-35岁', '36岁以上']
      },
      {
        id: 2,
        type: 'checkbox',
        title: '您喜欢的编程语言有哪些？',
        options: ['JavaScript', 'Python', 'Java', 'C++']
      }
    ],
    answers: {}
  };
}

动态渲染问卷表单

通过 v-for 循环渲染问题列表，根据问题类型绑定不同的输入组件。

<template>
  <div v-for="q in questions" :key="q.id">
    <h3>{{ q.title }}</h3>
    <div v-if="q.type === 'radio'">
      <label v-for="(opt, index) in q.options" :key="index">
        <input type="radio" v-model="answers[q.id]" :value="opt"> {{ opt }}
      </label>
    </div>
    <div v-if="q.type === 'checkbox'">
      <label v-for="(opt, index) in q.options" :key="index">
        <input type="checkbox" v-model="answers[q.id]" :value="opt"> {{ opt }}
      </label>
    </div>
  </div>
  <button @click="submit">提交问卷</button>
</template>

表单验证与提交

使用 VeeValidate 或自定义逻辑验证必填项，提交数据到后端 API。

vue实现问卷调查

methods: {
  submit() {
    if (Object.keys(this.answers).length !== this.questions.length) {
      alert('请完成所有问题');
      return;
    }
    axios.post('/api/survey', this.answers)
      .then(() => alert('提交成功'))
      .catch(err => console.error(err));
  }
}

使用 UI 组件库优化界面

集成 Element UI 等库提升表单交互体验。

<el-form>
  <el-form-item v-for="q in questions" :key="q.id" :label="q.title">
    <el-radio-group v-if="q.type === 'radio'" v-model="answers[q.id]">
      <el-radio v-for="opt in q.options" :key="opt" :label="opt"></el-radio>
    </el-radio-group>
    <el-checkbox-group v-if="q.type === 'checkbox'" v-model="answers[q.id]">
      <el-checkbox v-for="opt in q.options" :key="opt" :label="opt"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-button type="primary" @click="submit">提交</el-button>
</el-form>

响应式与状态管理

复杂问卷可使用 Vuex 管理全局状态，确保多页面问卷数据同步。

// store.js
export default new Vuex.Store({
  state: {
    surveyData: {}
  },
  mutations: {
    updateAnswer(state, { qid, value }) {
      state.surveyData[qid] = value;
    }
  }
});