I am working in a vue component and have a v-for loop in the html that creates some v-text-fields. I want to be able to verify that the v-text-field matches one of the elements in an answer array. I have it set up like this below right now.

<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="validator"
                                @input="answerInputValidator($event, element)"
                                ></v-text-field>
                            </v-expansion-panel-content>
                        </v-container>
                    </v-expansion-panel-header>
                </v-expansion-panel>

The answer input validator function is set up like this below:

answerInputValidator(evt, prompt) {
        this.answerObjects.forEach(element => {
            if(element.value === evt){
                prompt.answer = evt;
                return this.validator = false;
            }else{
                return this.validator = true;
            }
        });
    }

The function works to validate the v-text-field and links to :error with the property this.validator. However, the issue I am having is that this.validator is a variable declared on the whole of the component so if one input area is found to be valid and the user moves onto the next one and starts inputting and invalid response the previous input area will also be set to invalid. Because this.validtor then gets set to true because the input is invalid on the element being manipulated. But I don't want it to affect all other v-text-fields. I need to be able to check the input against an array of information but treat each field differently. Any ideas on how to achieve this?

CodePudding user response：

You'll need as many error validator flags as you have v-text-field elements. I don't know the structure of the prompts array but maybe each element of it can have its own isError property initialized to false. Then each v-text-field can have the error prop set as :error="element.isError" Then the validator method can receive each element and toggle that element's individual isError flag on or off without affecting any others.

CodePudding user response：

I don't know how v-text-field works since I have never user Vuetify, but as another answer says each of the prompt could have a property to check is the answer match.

Here is a snippet of how I would do it using plain vue.

Template

  <template>
<main>
    <div v-for="option in options" :key="option.id">
        <input
            type="text"
            v-model="option.userAnswer"
            @input="handleAnswer(option)"
        />
    </div>
</main>

Data

    data() {
    return {
        options: [
            {
                id: 1,
                question: "question 1",
                userAnswer: "",
                rightAnswer: "hello 1",
                isAnswerCorrect: false,
            },
            {
                id: 2,
                question: "question 2",
                userAnswer: "",
                rightAnswer: "hello 2",
                isAnswerCorrect: false,
            },
            {
                id: 3,
                question: "question3",
                userAnswer: "",
                rightAnswer: "hello3",
                isAnswerCorrect: false,
            },
        ],
    };
},

Methods

methods: {
    handleAnswer(option) {
        if (option.userAnswer === option.rightAnswer) {
            console.log("right");
            option.isAnswerCorrect = true;
        } else {
            console.log("error");
            option.isAnswerCorrect = false;
        }
    },
},

I hope it helps!