Vue自定义元素渲染控制：调研问卷报销模块显示逻辑修复

问题背景 #

我开发了一份调研问卷，规则为前1000名填写者可获得报销。需要实现**仅当参与人数≤1000时，在问卷末尾显示自定义报销组件<ResearchQuestionReimbursement>**的逻辑。问卷题目从CMS后端获取，现有代码存在以下问题：

• 参与人数超过1000时，出现index未定义错误（索引超出questions数组长度）
• 尝试给报销组件加v-if判断后导致页面空白
• 期望实现：参与人数>1000时，用户完成最后一题后直接跳转到表单保存逻辑

原代码片段 #

渲染模板

<div class="questionContainer" v-if="intentGiven && consentGiven && !surveyComplete">
     <div v-if="$store.state.scoring.gameCompleted && this.index == this.QuestionnaireSize && this.ParticipantCount <= 1000">
        <ResearchQuestionReimbursement v-on:answered="advanceQuestion"/>
    </div>  
    <div v-else>
        <ResearchQuestionMultipleChoice :question="questions[index]"
            v-if="questions[index].Type == 'MultipleChoice'" 
            v-on:answered="advanceQuestion" />
        <ResearchQuestionFreeAnswer :question="questions[index]"
            v-if="questions[index].Type == 'FreeAnswer'" 
            v-on:answered="advanceQuestion" />
    </div>
</div>

索引控制逻辑

if (this.index < this.questions.length -1 || (this.$store.state.scoring.gameCompleted && this.index < this.questions.length)) {
    this.index++;
    console.log(`post: ${this.index}`)
} else {
.....
//required code to save the form
}

问题根源 #

1. 索引控制逻辑未区分参与人数是否超1000，当人数超限后仍允许index递增到questions.length，导致渲染时访问questions[index]越界
2. 模板中报销组件的显示条件与索引逻辑不匹配，判断冲突引发页面空白

解决方案 #

一、修正模板渲染逻辑

调整判断条件，确保只有在合法索引范围内渲染题目，同时明确报销组件的显示时机；当超出合法范围时直接触发保存逻辑：

<div class="questionContainer" v-if="intentGiven && consentGiven && !surveyComplete">
    <!-- 报销组件：仅在完成最后一题、参与人数≤1000时显示 -->
    <div v-if="index === questions.length - 1 && $store.state.scoring.gameCompleted && ParticipantCount <= 1000">
        <ResearchQuestionReimbursement v-on:answered="advanceQuestion"/>
    </div>  
    <!-- 正常问卷题目：仅当index在数组合法范围内时渲染 -->
    <div v-else-if="index < questions.length">
        <ResearchQuestionMultipleChoice 
            :question="questions[index]"
            v-if="questions[index].Type === 'MultipleChoice'" 
            v-on:answered="advanceQuestion" 
        />
        <ResearchQuestionFreeAnswer 
            :question="questions[index]"
            v-if="questions[index].Type === 'FreeAnswer'" 
            v-on:answered="advanceQuestion" 
        />
    </div>
    <!-- 人数超1000且完成最后一题：直接触发保存 -->
    <div v-else>
        {{ saveForm() }}
    </div>
</div>

二、修正索引控制逻辑（advanceQuestion方法）

新增参与人数判断分支，当人数超1000且完成最后一题时，直接进入保存逻辑，不再递增索引：

advanceQuestion() {
    // 判断是否需要显示报销组件
    const needShowReimbursement = this.index === this.questions.length - 1 
        && this.$store.state.scoring.gameCompleted 
        && this.ParticipantCount <= 1000;

    if (this.index < this.questions.length - 1 || needShowReimbursement) {
        // 还有题目未完成，或需要显示报销组件时，递增索引
        this.index++;
        console.log(`post: ${this.index}`);
    } else {
        // 人数超1000且完成最后一题，直接保存表单
        this.saveForm();
    }
}

// 表单保存方法示例
saveForm() {
    // 实现表单保存逻辑
    this.surveyComplete = true;
    // ...其他保存操作（如提交后端等）
}

关键调整点 #

• 模板中增加index < questions.length判断，彻底避免数组越界访问
• 索引逻辑中用needShowReimbursement变量明确区分显示报销组件的场景
• 当参与人数>1000时，用户完成最后一题后直接触发保存，不再让索引超出数组范围

内容的提问来源于stack exchange，提问作者Paul Carlson