6. projekt [vuejs-04]: wytyczne [v-model, v-bind], atrybuty obliczone, formularz wprowadzania danych

Struktura drzewa projektu [vuejs-04] wygląda następująco:

6.1. Główny skrypt [main.js]

Jest taki sam jak w poprzednim przykładzie.

6.2. Główny komponent [App]

Kod komponentu [App.vue] jest następujący:


<template>
  <b-container>
    <b-card>
      <!-- komunikat powitalny -->
      <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>

Komponent [App.vue] wykorzystuje nowy komponent [Form] (wiersze 12, 19, 24).

6.3. Komponent [Form]

Kod komponentu [Form] jest następujący:


<template>
  <div>
    <!-- formularz -->
    <b-form>
      <!-- elementy formularza -->
      <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>
            <!-- przycisk -->
            <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>

<!-- skrypt -->
<script>
  export default {
    // nazwa
    name: "Form",
    // statyczne atrybuty komponentu
    data() {
      return {
        // liczba elementów podrzędnych
        enfants: ""
      };
    },

    // atrybuty obliczeniowe
    computed: {
      // atrybut [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // atrybut [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // metody
    methods: {
      doSomething() {
        // liczba elementów podrzędnych jest znana w momencie sprawdzania poprawności
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Wygląd

Uwagi

wiersze 4–32: tag <b-form> wprowadza formularz Bootstrap;
wiersz 6: tag <b-row> wprowadza wiersz do formularza;
wiersz 7: tag <b-col cols=’4’> wprowadza kolumnę zajmującą 4 kolumny Bootstrap;
wiersz 8: tag <b-card> [6] wprowadza kartę Bootstrap, czyli obszar otoczony ramką;
wiersz 9: tag <b-form-group> tworzy grupę powiązanych ze sobą elementów formularza. W tym przypadku tekst (atrybut [label]) [1] jest powiązany z polem wprowadzania danych (atrybut [label-for]). Wartość [label-for] jest wartością pola [id], wiersz 12, pola wprowadzania danych;
wiersze 10–14: tag <b-input> [2] wprowadza pole wprowadzania danych:
- wiersz 10: [type=’text’] wskazuje, że w polu wprowadzania danych można wpisywać tekst. Można było wpisać [type=’number’] z ograniczeniami [min=’val1’ max=’val2’ step=’val3’], ponieważ oczekuje się liczby elementów potomnych. Użyto [type=’text’], aby pokazać, jak sprawdzić poprawność wprowadzonych danych;
- wiersz 12: atrybut [placeholder] [3] określa komunikat wyświetlany w polu wprowadzania danych, dopóki użytkownik niczego nie wpisze;
- wiersz 13: dyrektywa [v-model] powiązuje w sposób dwukierunkowy wprowadzoną wartość z atrybutem [enfants] (wiersz 42) komponentu:
  - gdy zmienia się wprowadzona wartość, zmienia się również wartość atrybutu [enfants];
  - gdy zmienia się wartość atrybutu [enfants], zmienia się również wprowadzona wartość, tzn. zmienia się zawartość [2];
  - ważne jest, aby zrozumieć, że dzięki powyższemu mechanizmowi, gdy użytkownik kliknie przycisk [Valider] [5], atrybut [enfants] w wierszu 42 przyjmuje wartość wprowadzoną w [2];
- wiersz 14: dyrektywa [v-bind] wprowadza powiązanie między, z jednej strony, atrybutem tagu <b-input> – w tym przypadku atrybutem [state] – a atrybutem komponentu – w tym przypadku [enfantsValide] w wierszu 53. Atrybut [enfantsValide] jest szczególny, ponieważ jest to funkcja zwracająca wartość atrybutu. Tego typu atrybuty nazywane są atrybutami obliczonymi. Atrybuty obliczone znajdują się we właściwości [computed], wiersz 47, komponentu. Atrybuty obliczeniowe stosuje się w taki sam sposób jak atrybuty statyczne funkcji [data]: w wierszu 14 nie wpisuje się [v-bind:state=’enfantsValide()’], lecz [v-bind:state=’enfantsValide’], bez nawiasów. Również podczas odczytu [template] nie da się odróżnić atrybutu obliczeniowego od statycznego. W tym celu należy sprawdzić kod skryptu komponentu;
- wiersz 14: atrybut [state] określa, czy wprowadzona wartość jest prawidłowa, czy nieprawidłowa: jeśli [enfantsValide] zwraca wartość [true], wprowadzona wartość jest uznawana za prawidłową, w przeciwnym razie za nieprawidłową. Powyższy zrzut ekranu przedstawia komponent [b-input], gdy funkcja [enfantsValide] zwraca wartość [false];
- wiersz 15: tag <b-form-invalid-feedback> [4] umożliwia wyświetlenie komunikatu, gdy wartość wprowadzona w polu [2] jest nieprawidłowa. Jej atrybut [:state=’enfantsValide’] jest identyczny z atrybutem [v-bind:state=’enfantsValide’] z wiersza 14. Dyrektywę [v-bind] można pominąć, ale należy zachować znak [:]. Komunikat o błędzie pojawia się zatem, gdy atrybut [enfantsValide] ma wartość [false];
- wiersz 16: koniec grupy elementów <b-group>;
- wiersz 18: przycisk [5], który pozwoli zatwierdzić wprowadzone dane:
  - będzie on niebieski – [variant=’primary’];
  - [:disabled="formInvalide"]: atrybut [disabled] służy do aktywacji/dezaktywacji przycisku. Atrybut ten jest powiązany (v-bind) z atrybutem obliczeniowym [formInvalide] z wiersza 49;
  - [@click="doSomething"]: gdy użytkownik kliknie przycisk, zostanie wykonana metoda [doSomething] z linii 59;
- wiersze 19–22: zamknięcie różnych otwartych tagów;
- wiersze 23–29: nowy wiersz w [template]. [class=’mt-3’] oznacza [margin (m) top (t) égale à 3 spacers]. [spacer] to miara odstępu w Bootstrapie. Ta klasa generuje odstęp [8] widoczny na powyższym zrzucie ekranu. Bez tej klasy obszar [7] przylega do obszaru [1-6];
- wiersz 24: kolumna zajmująca 4 kolumny Bootstrap;
- wiersze 25–27: komunikat ostrzegawczy [warning] wyświetlający wartość atrybutu statycznego [enfants] (wiersz 42). Ponieważ atrybut ten ma dwukierunkową powiązanie z polem wprowadzania danych, gdy tylko użytkownik wprowadzi w nim zmianę, wartość wyświetlana w komunikacie również ulega zmianie;
- wiersze 34–65: kod komponentu jS;
- wiersz 42: jedyny atrybut statyczny komponentu;
- wiersze 47–56: atrybuty obliczeniowe komponentu;
- wiersze 53–55: wartość wprowadzona jest uznawana za prawidłową, jeśli jest to dodatnia liczba całkowita, ewentualnie poprzedzona lub następująca po „spacjach”;
- wiersze 49–51: formularz uznaje się za poprawny, jeśli wprowadzona liczba dzieci jest prawidłowa. Zazwyczaj formularz zawiera kilka pól wprowadzania danych i uznaje się go za poprawny, jeśli wszystkie z nich są prawidłowe;
- wiersze 58–63: metody komponentu, które reagują na jego zdarzenia. W tym przypadku występuje tylko jedno zdarzenie: [click] związane z przyciskiem. Wystarczy wyświetlić wprowadzoną wartość, aby pokazać, że mamy do niej dostęp;

6.4. Uruchomienie projektu

Modyfikujemy plik [package.json] i uruchamiamy projekt: