vue实现问卷调查
Vue 实现问卷调查的方法
使用 Vue 表单组件构建问卷
Vue 提供了丰富的表单组件，可以用于构建问卷调查。通过 v-model 实现数据双向绑定，结合 v-for 动态渲染问题列表。
<template>
<div>
<h3>{{ title }}</h3>
<div v-for="(question, index) in questions" :key="index">
<p>{{ question.text }}</p>
<input
v-if="question.type === 'text'"
v-model="question.answer"
type="text"
>
<select v-if="question.type === 'select'" v-model="question.answer">
<option v-for="option in question.options" :value="option">
{{ option }}
</option>
</select>
</div>
<button @click="submit">提交问卷</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '用户满意度调查',
questions: [
{ text: '您的年龄是？', type: 'text', answer: '' },
{ text: '您对我们的服务满意吗？', type: 'select', options: ['非常满意', '满意', '一般', '不满意'], answer: '' }
]
}
},
methods: {
submit() {
console.log(this.questions)
}
}
}
</script>使用第三方库简化开发
对于更复杂的问卷调查需求，可以使用专门针对 Vue 的问卷库，如 vue-survey 或 survey-vue。这些库提供了现成的组件和功能，如问题跳转、验证等。
安装 survey-vue：
npm install survey-vue示例代码：
<template>
<div>
<Survey :survey="survey"/>
</div>
</template>
<script>
import { Survey } from 'survey-vue'
import 'survey-vue/defaultV2.min.css'
export default {
components: { Survey },
data() {
const surveyJson = {
pages: [{
name: 'page1',
elements: [{
type: 'text',
name: 'name',
title: '请输入您的姓名'
}]
}]
}
return {
survey: new Survey.Model(surveyJson)
}
}
}
</script>实现问卷数据存储
问卷调查数据通常需要提交到后端服务器存储。可以使用 Axios 发送 HTTP 请求，将收集到的数据提交到 API 接口。
methods: {
async submitSurvey() {
try {
const response = await axios.post('/api/surveys', {
title: this.title,
answers: this.questions.map(q => ({
question: q.text,
answer: q.answer
}))
})
console.log('提交成功', response.data)
} catch (error) {
console.error('提交失败', error)
}
}
}添加表单验证
为确保用户填写了必填问题，可以添加表单验证逻辑。Vue 提供了计算属性和条件渲染来实现验证功能。
computed: {
isFormValid() {
return this.questions.every(q => {
if (q.required) return q.answer.trim() !== ''
return true
})
}
}模板中添加验证提示：
<button @click="submit" :disabled="!isFormValid">提交问卷</button>
<p v-if="!isFormValid" class="error">请填写所有必填问题</p>设计响应式问卷布局
使用 CSS 或 UI 框架（如 Element UI、Vuetify）可以快速实现美观的问卷界面。例如使用 Vuetify 的表单组件：
<template>
<v-container>
<v-form ref="form">
<v-text-field
v-model="name"
label="姓名"
required
></v-text-field>
<v-radio-group v-model="rating" label="满意度评分">
<v-radio label="5分" value="5"></v-radio>
<v-radio label="4分" value="4"></v-radio>
</v-radio-group>
</v-form>
</v-container>
</template>通过以上方法，可以构建出功能完善、用户体验良好的问卷调查系统。根据项目需求选择合适的技术方案，从简单表单到复杂问卷都能高效实现。
