Vue组件中v-for生成的v-text-field独立校验方案咨询

问题核心是你用了组件级的validator变量，导致所有输入框共享同一错误状态。要实现独立校验，需给每个输入项绑定专属的错误状态：

步骤1：给每个prompt添加独立错误标记 #

在prompts数组初始化或数据加载完成后，为每个元素添加hasError属性（初始值设为false）：

// 示例：初始化prompts时添加错误标记
this.prompts = yourPromptData.map(item => ({
  ...item,
  hasError: false
}));

步骤2：修改模板绑定错误状态 #

将:error="validator"改为绑定当前元素的hasError属性：

<v-expansion-panel
    v-for="(element, index) in prompts"
    :key="'bucket-a-' + index"
>
    <v-expansion-panel-header>
        <v-container>
            <v-expansion-panel-content>
                <v-text-field
                    label="Answer must match one of the answer values from above"
                    clearable
                    v-model="element.answer"
                    :error="element.hasError" <!-- 绑定当前元素的错误状态 -->
                    @input="answerInputValidator($event, element)"
                ></v-text-field>
            </v-expansion-panel-content>
        </v-container>
    </v-expansion-panel-header>
</v-expansion-panel>

步骤3：重写校验函数 #

移除全局validator变量，直接修改当前prompt的hasError，同时修正校验逻辑（原forEach逻辑会在第一个不匹配项就返回错误，需检查所有可选值）：

answerInputValidator(evt, prompt) {
    // 检查输入值是否匹配answerObjects中的任意value
    const isMatch = this.answerObjects.some(element => element.value === evt);
    // 设置当前输入框的错误状态
    prompt.hasError = !isMatch;
    // 无需手动赋值prompt.answer，v-model已自动同步
}

这样每个输入框的错误状态完全独立，不会互相影响。

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