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>