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

Пользователь

от terrence , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от loyal , год назад

@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>


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

Пользователь

от william_stoltenberg , 3 месяца назад

@terrence 

В этом примере предполагается, что у вас уже есть компонент Vue и форма с несколькими полями ввода. Вам нужно добавить обработчики событий на эти поля, чтобы отслеживать их заполнение.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div>
    <input type="text" v-model="textInput" @input="updateFormCompletion" />
    <input type="email" v-model="emailInput" @input="updateFormCompletion" />
    <input type="tel" v-model="phoneInput" @input="updateFormCompletion" />
    
    <div>Заполнено: {{ formCompletion }}%</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formCompletion: 0,
      textInput: '',
      emailInput: '',
      phoneInput: ''
    }
  },
  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);
    }
  }
}
</script>


В этом примере мы добавили три поля ввода (для текста, электронной почты и телефона), а также блок для отображения процента заполнения формы. Каждое поле ввода имеет связь данных с переменными textInput, emailInput и phoneInput через директиву v-model. При изменении любого из этих полей вызывается метод updateFormCompletion, который пересчитывает процент заполнения формы и обновляет formCompletion.


Обратите внимание, что в методе updateFormCompletion мы используем название переменных полей формы для обновления значения formCompletion. Если у вас есть другие поля или хотите изменить их названия, обновите соответствующие значения в массиве fields.