Highlight inputs when there are duplicates in a v-for loop with computed property

I have a v-for loop that shows the order of quiz questions (the order is a pivot column) and I'd like the class is-invalid to be added to all inputs if the client accidentally sets a duplicate order value.

Could someone suggest a way to do this with a computed property?

<div v-for="(question, index) in questions" :key="index">
    <div class="pb-3">
        {{ question.stem_en }}
    </div>
    <div class="form-group row">
        <div class="col-md-1">
            <label>Order:</label>
        </div>
        <div class="col-md-2">
 	<!-- I want the inputs to have class 'is-invalid' if any these values appear more than once in the loop -->
            <input type="number" class="form-control" v-model="question.pivot.order">
        </div>
        <div class="col-9">
            <button @click.prevent="updateOrder(quiz.id, question.id, question.pivot.order)"
                class="btn btn-primary">Update Order</button>
            <button @click.prevent="deleteQuestion(quiz.id, question.id)" class="btn btn-danger">Remove from
                Quiz</button>
        </div>
    </div>
    <hr>
</div>

SilenceBringer

5 years ago

Best Answer

Level 55

@twoarmtom you can try something like:

        <div class="col-md-2">
            <input type="number"
                        class="form-control"
                        :class="{ 'is-invalid': questions.filter(item =>item.pivot.order === question.pivot.order).length > 1 }"
                        v-model="question.pivot.order">
        </div>

twoarmtom

5 years ago

Level 5

@silencebringer That was perfect, and much more elegant than I expected, thank you!!

Please or to participate in this conversation.