6. проект [vuejs-04]: директиви [v-model, v-bind], обчислені атрибути, форма введення даних

Структура проекту [vuejs-04] така:

6.1. Головний скрипт [main.js]

Він такий самий, як у попередньому прикладі.

6.2. Головний компонент [App]

Код [App.vue] має такий вигляд:


<template>
  <b-container>
    <b-card>
      <!-- повідомлення-презентація -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>


<script>
  import Form from "./components/Form.vue";

  export default {
    name: "app",
    components: {
      Form
    }
  };
</script>

Компонент [App.vue] використовує новий компонент [Form] (рядки 12, 19, 24).

6.3. Компонент [Form]

Код компонента [Form] такий:


<template>
  <div>
    <!-- форма -->
    <b-form>
      <!-- елементи форми -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- кнопка -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<!-- скрипт -->
<script>
  export default {
    // ім'я
    name: "Form",
    // статичні атрибути компонента
    data() {
      return {
        // кількість дочірніх елементів
        enfants: ""
      };
    },

    // обчислені атрибути
    computed: {
      // атрибут [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // атрибут [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // методи
    methods: {
      doSomething() {
        // кількість дочірніх елементів відома під час перевірки
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Візуальне відображення

Коментарі

рядки 4–32: тег <b-form> вводить форму Bootstrap;
рядок 6: тег <b-row> вводить рядок у форму;
рядок 7: тег <b-col cols=’4’> вводить стовпець, що займає 4 стовпці Bootstrap;
рядок 8: тег <b-card> [6] створює картку Bootstrap — область, обрамлену межею;
рядок 9: тег <b-form-group> вводить групу пов’язаних між собою елементів форми. Тут текст (атрибут [label]) [1] пов’язаний із полем введення (атрибут [label-for]). Значення [label-for] є значенням поля [id], рядок 12, поля введення;
рядки 10–14: тег <b-input> [2] вводить поле введення:
- рядок 10: [type=’text’] вказує, що в полі введення можна вводити текст. Можна було б написати [type=’number’] з обмеженнями [min=’val1’ max=’val2’ step=’val3’], оскільки очікується наявність дочірніх елементів. Ми вказали [type=’text’], щоб продемонструвати, як перевіряти правильність введених даних;
- рядок 12: атрибут [placeholder] [3] визначає повідомлення, що відображається у полі введення, доки користувач нічого не ввів;
- рядок 13: директива [v-model] двонаправлено пов’язує введене значення з атрибутом [enfants] (рядок 42) компонента:
  - коли введене значення змінюється, то значення атрибута [enfants] також змінюється;
  - коли значення атрибута [enfants] змінюється, то значення, що вводиться, також змінюється, тобто змінюється вміст [2];
  - важливо зрозуміти, що завдяки описаному вище механізму, коли користувач натискає на кнопку [Valider] [5], атрибут [enfants] у рядку 42 приймає значення, введене в [2];
- рядок 14: директива [v-bind] встановлює зв’язок між, з одного боку, атрибутом тегу <b-input> (у даному випадку атрибутом [state]) та, з іншого боку, атрибутом компонента (у даному випадку [enfantsValide]) у рядку 53. Атрибут [enfantsValide] є особливим у тому сенсі, що це функція, яка повертає значення атрибута. Такий тип атрибута називається обчислювальним атрибутом. Обчислювані атрибути містяться у властивості [computed] компонента (рядок 47). Обчислювані атрибути використовуються так само, як і статичні атрибути функції [data]: у рядку 14 не пишуть [v-bind:state=’enfantsValide()’], а [v-bind:state=’enfantsValide’], без дужок. Також під час читання [template] неможливо відрізнити обчислюваний атрибут від статичного. Для цього потрібно переглянути код скрипта компонента;
- рядок 14: атрибут [state] визначає статус (дійсний/недійсний) введеного значення: якщо [enfantsValide] повертає значення [true], введене значення вважається дійсним, інакше — недійсним. На знімку екрана вище показано компонент [b-input], коли функція [enfantsValide] повертає значення [false];
- рядок 15: тег <b-form-invalid-feedback> [4] дозволяє відображати повідомлення, коли введене значення [2] є недійсним. Його атрибут [:state=’enfantsValide’] ідентичний атрибуту [v-bind:state=’enfantsValide’] у рядку 14. Директиву [v-bind] можна опустити, але знак [:] слід залишити. Отже, повідомлення про помилку з’являється, коли значення атрибута [enfantsValide] дорівнює [false];
- рядок 16: кінець групи елементів <b-group>;
- рядок 18: кнопка [5], яка дозволить підтвердити введені дані:
  - вона буде синього кольору [variant=’primary’];
  - [:disabled="formInvalide"]: атрибут [disabled] дозволяє активувати/деактивувати кнопку. Цей атрибут пов’язаний (v-bind) з обчислювальним атрибутом [formInvalide] у рядку 49;
  - [@click="doSomething"]: коли користувач натисне на кнопку, буде виконано метод [doSomething], рядок 59;
- рядки 19–22: закриття різних відкритих тегів;
- рядки 23–29: новий рядок у [template]. [class=’mt-3’] означає [margin (m) top (t) égale à 3 spacers]. [spacer] — це міра відступу в Bootstrap. Цей клас створює відступ [8] на знімку екрана вище. Без цього класу область [7] прилягає до області [1-6];
- рядок 24: стовпець, що займає 4 стовпці Bootstrap;
- рядки 25–27: сповіщення [warning], що відображає значення статичного атрибута [enfants] (рядок 42). Оскільки цей атрибут має двосторонню прив’язку до поля введення, щойно користувач змінює його, значення, що відображається у сповіщенні, також змінюється;
- рядки 34–65: код компонента jS;
- рядок 42: єдиний статичний атрибут компонента;
- рядки 47–56: обчислювані атрибути компонента;
- рядки 53–55: введене значення вважається дійсним, якщо це додатне ціле число, перед яким або після якого можуть бути «пробіли»;
- рядки 49–51: форма вважається дійсною, якщо введене значення кількості дітей є дійсним. Зазвичай форма має кілька полів введення і вважається дійсною, якщо всі вони є дійсними;
- рядки 58–63: методи компонента, які реагують на його події. Тут є лише одна подія: [click] на кнопці. Ми просто відображаємо введене значення, щоб показати, що маємо до нього доступ;

6.4. Виконання проєкту

Змінюємо файл [package.json] і запускаємо проект: