vue实现问卷联动
Vue 实现问卷联动功能
问卷联动是指根据用户的选择动态显示或隐藏相关问题，通常用于复杂表单场景。Vue 的响应式特性和条件渲染非常适合实现这种需求。
数据驱动设计
使用 Vue 的 data 或 Vuex 存储问卷数据，确保选项变化能触发视图更新：
data() {
return {
questions: [
{
id: 1,
text: "您的职业是？",
options: ["学生", "上班族", "自由职业"],
selected: null
},
{
id: 2,
text: "您的专业是？",
showIf: { questionId: 1, value: "学生" },
options: ["理科", "文科", "工科"],
selected: null
}
]
}
}条件渲染实现
通过计算属性或方法判断是否显示关联问题：
methods: {
shouldShow(question) {
if (!question.showIf) return true
const parent = this.questions.find(q => q.id === question.showIf.questionId)
return parent.selected === question.showIf.value
}
}模板中使用 v-if 控制显示：
<div v-for="question in questions" :key="question.id">
<div v-if="shouldShow(question)">
<h3>{{ question.text }}</h3>
<select v-model="question.selected">
<option v-for="option in question.options" :value="option">
{{ option }}
</option>
</select>
</div>
</div>动态问题加载
对于需要异步加载的问题，可以使用 watch 监听选项变化：
watch: {
'questions[0].selected'(newVal) {
if (newVal === '上班族') {
this.loadCompanyQuestions()
}
}
}表单验证处理
联动问卷需要动态验证规则，可使用计算属性生成动态校验规则：
computed: {
dynamicRules() {
return {
'questions[1].selected': [
{
required: this.shouldShow(this.questions[1]),
message: '请填写专业信息'
}
]
}
}
}性能优化建议
对于大型问卷，考虑以下优化：
- 使用 keep-alive 缓存已渲染的问题组件
- 对问题列表进行虚拟滚动处理
- 将静态问题配置与动态响应逻辑分离
完整示例组件
<template>
<div class="questionnaire">
<div v-for="(q, index) in filteredQuestions" :key="q.id">
<h3>{{ q.text }}</h3>
<select v-model="q.selected" @change="handleChange(index)">
<option value="">请选择</option>
<option v-for="opt in q.options" :value="opt">{{ opt }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
questions: [
// 问题配置
]
}
},
computed: {
filteredQuestions() {
return this.questions.filter(q => this.shouldShow(q))
}
},
methods: {
shouldShow(question) {
// 显示逻辑
},
handleChange(index) {
// 处理选项变化
}
}
}
</script>这种实现方式充分利用了 Vue 的响应式特性，通过数据驱动视图更新，可以灵活处理各种问卷联动场景。根据实际需求，可以进一步扩展为多级联动或交叉联动等复杂逻辑。
