Vue 3 中动态添加问卷题目需用 ref 管理题目数组，每题含唯一 id、type、content、options；通过 addQuestion 新增、removeQuestion 删除题目；选择题支持 addOption/removeOption 动态维护选项；提交前过滤空题干及无效选项。
Vue 3 中实现问卷调查题目的动态添加，核心是用响应式数据管理题目列表，配合 `v-for` 渲染，再通过方法增删题目项。关键在于每个题目要有唯一标识、可编辑的属性（如题干、题型、选项），且新增题目时能正确初始化结构。
用 ref 或 reactive 管理题目数组
推荐使用 ref 包裹一个数组，便于后续在模板中直接 v-for；每道题用对象表示，包含 id（用于 key 和删除）、type（单选/多选/填空等）、content（题干）、options（选项数组）等字段：
import { ref } from 'vue'
<p>const questions = ref([
{
id: Date.now(),
type: 'radio',
content: '',
options: ['', '']
}
])</p><p>// 新增一道题
const addQuestion = () => {
questions.value.push({
id: Date.now(),
type: 'radio',
content: '',
options: ['', '']
})
}
模板中用 v-for 渲染并绑定输入
遍历 questions，为每个题目渲染编辑区。注意用 :key="q.id" 保证列表更新稳定性；题干和选项用 v-model 双向绑定到对应字段：
<div v-for="q in questions" :key="q.id" class="question-item"> <input v-model="q.content" placeholder="请输入题目内容" /> <p><select v-model="q.type"> <option value="radio">单选题</option> <option value="checkbox">多选题</option> <option value="input">填空题</option> </select></p><p><!-- 仅当是选择题时显示选项 --> <div v-if="q.type !== 'input'"> <div v-for="(opt, idx) in q.options" :key="idx"> <input v-model="q.options[idx]" placeholder="选项内容" /> <button @click="removeOption(q, idx)">删除选项</button> </div> <button @click="addOption(q)">+ 添加选项</button> </div></p><p><button @click="removeQuestion(q.id)">删除该题</button> </div></p><p><button @click="addQuestion">+ 添加题目</button>
支持选项的动态增删
每道选择题的选项也应可编辑、可增删。新增选项时 push 一个空字符串；删除选项需注意保留至少两个选项（避免只剩一个导致逻辑异常），可用 splice：
立即学习“前端免费学习笔记（深入）”；
const addOption = (question) => {
question.options.push('')
}
<p>const removeOption = (question, index) => {
if (question.options.length > 2) {
question.options.splice(index, 1)
}
}</p><p>const removeQuestion = (id) => {
const idx = questions.value.findIndex(q => q.id === id)
if (idx > -1) questions.value.splice(idx, 1)
}
提交前校验与数据导出
提交时可简单过滤掉题干为空的题目，或对选项做去重、去空处理。最终提交的数据就是 questions.value 的深拷贝（避免引用污染）：
const submitSurvey = () => {
const validQuestions = questions.value.filter(q =>
q.content?.trim() &&
(q.type === 'input' || q.options.some(opt => opt.trim()))
)
<p>// 发送到后端或本地保存
console.log(JSON.stringify(validQuestions, null, 2))
}
