Vue中用计算属性实现问卷完成度百分比，核心是统计answer非空有效的题目数除以总数再乘100取整；需根据场景定义“完成”逻辑（非空判断/校验通过/状态标记），推荐题目用数组结构并统一判断answer有效性。
在 Vue 中，用计算属性（computed）实现问卷调查已完成题目的百分比，核心是：统计已填写/非空/有效回答的题目数，除以总题目数，再乘以 100 并保留整数或一位小数。
明确“已完成”的判断逻辑
不同问卷场景，“完成”定义不同。常见方式有：
-
非空判断：输入框不为空字符串、选择项有值（如
value !== null && value !== undefined && value !== ''） -
必填校验通过：结合表单验证规则（如使用 Element Plus 的
validateField或自定义校验函数） -
状态标记：每道题维护一个
isCompleted: boolean字段，由用户操作或失去焦点时更新
数据结构建议（便于计算）
推荐将题目设计为数组，每项含 id、type、answer（或 value）等字段：
data() {
return {
questions: [
{ id: 1, type: 'input', answer: '张三' },
{ id: 2, type: 'select', answer: '选项A' },
{ id: 3, type: 'radio', answer: null },
{ id: 4, type: 'checkbox', answer: ['A', 'C'] }
]
}
}这样计算属性可直接遍历 questions，统一判断 answer 是否有效。
立即学习“前端免费学习笔记（深入）”；
编写计算属性计算百分比
以“非空且非未定义”为完成标准（兼容字符串、数组、对象等类型）：
computed: {
completionRate() {
const total = this.questions.length
if (total === 0) return 0
<pre class="brush:php;toolbar:false;">const completed = this.questions.filter(q => {
const val = q.answer
// 排除 null、undefined、空字符串、空数组、空对象
if (val === null || val === undefined) return false
if (typeof val === 'string' && val.trim() === '') return false
if (Array.isArray(val) && val.length === 0) return false
if (typeof val === 'object' && val !== null && Object.keys(val).length === 0) return false
return true
}).length
return Math.round((completed / total) * 100)} }
模板中直接使用：
<div>已完成：<strong>{{ completionRate }}%</strong></div>进阶：响应式更新与防抖优化
如果题目答案由异步加载或频繁输入触发（如搜索类题目），注意：
- 确保
questions及其answer字段是响应式的（用ref或reactive正确声明） - 避免在计算属性中做副作用操作（如发请求、修改 state）
- 如需防抖显示（例如输入时延迟更新百分比），可改用
watch+debounce，但计算属性本身已具备缓存特性，通常无需额外防抖
