Как посчитать % заполнения формы на vue.js?

@terrence 

Для подсчета процента заполнения формы на Vue.js можно использовать следующий подход:

1. Создайте переменную в компоненте Vue, которая будет хранить значение заполнения формы. Для примера, назовем ее formCompletion.

1
2
3
4
5

data() {
  return {
    formCompletion: 0
  }
}

1. Добавьте обработчики событий на поля ввода формы, которые будут изменять значение formCompletion в зависимости от того, заполнены они или нет. Например, для текстового поля можно использовать следующий обработчик:

1

<input type="text" v-model="textInput" @input="updateFormCompletion" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

methods: {
  updateFormCompletion() {
    let completedFields = 0;
    const fields = ['textInput', 'emailInput', 'phoneInput']; // список полей формы

    fields.forEach(field => {
      if (this[field] !== '') {
        completedFields++;
      }
    });

    this.formCompletion = Math.floor(completedFields / fields.length * 100);
  }
}

1. При изменении любого поля формы будет вызван метод updateFormCompletion(), который пересчитает значение formCompletion на основе заполненных полей формы и обновит его в компоненте Vue.
2. Для отображения процента заполнения формы на странице можно использовать следующий код:

1

<div>Заполнено: {{ formCompletion }}%</div>

Обратите внимание, что в примере использованы только текстовые поля ввода. Для других типов полей (например, для флажков или выпадающих списков) могут потребоваться иные обработчики событий.