How to perform the operation once?

Question

JavaScript

There is a form that is filled in a loop

<form>
                <div class="form-group" v-for="(item, index) in info">
                    <label>{{item.name}} <i class="fas"></i></label>
                    <input type="text" class="form-control" v-model="info[index].title"
                        @input="updateData($event, item)">
                </div>


                <button class="btn btn-success">Send Data</button>
            </form>

and the code that executes when data is entered

methods: {
                updateData(e, item) {
                    let i = 0
                    console.log()
                    if (!item.pattern.test(item.title)) {
                        e.target.classList.add('is-invalid')
                        e.target.classList.remove('is-valid')
                        e.target.previousElementSibling.lastElementChild.classList.add('fa-exclamation-circle')
                        e.target.previousElementSibling.lastElementChild.classList.remove('fa-check-circle')
                    } else {
                        e.target.classList.remove('is-invalid')
                        e.target.classList.add('is-valid')
                        e.target.previousElementSibling.lastElementChild.classList.remove('fa-exclamation-circle')
                        e.target.previousElementSibling.lastElementChild.classList.add('fa-check-circle')
                    }
                }
            }

I can’t implement the progress bar, how to track the validation operation only once, otherwise the progress is filled every time I enter a character. Thanks in advance!
PS In the code above, the progress is not filled now)

Answer 1

https://ru.vuejs.org/v2/guide/syntax.html
won't v-once syntax work?

Answer 2

I don't know if it will help. :)
You can do it through a condition.
For example, logically
i=1
If i=1, then... And i-1
will not run the second time, since i has changed after 1 iteration