Reaktywna kontrola pola formularza VUE niesie za sobą kilka zagwozdek – jedną z nich jest współbieżność.

1. Robimy formularz HTML wewnątrz sekcji id=”APP” VUE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <div role="group">
            <b-form-input
                 type="text"
                 placeholder="Kategoria"
                 v-model="dodajKategoria"
                 :state="unikalnyKlucz"
                 @change="sprawdz"
                 aria-describedby="inputLiveHelp inputLiveFeedback"
               >
          </b-form-input>
          <b-form-invalid-feedback id="inputLiveFeedback">
              Nazwa kategorii musi być dłuższa od 0 i nie występować w bazie (sprawdzane przy wyjściu z pola).
          </b-form-invalid-feedback>
          <b-form-text id="inputLiveHelp">
             Nazwa kategorii jest poprawna.
           </b-form-text>
     </div>

2. Robimy zmienne użyte w pierwszym fragmencie do aplikacji JS VUE:
W sekcji data:

1
2
3
4
5
data: {
  dodajKategoria: '', //dodawana kategoria
  unikalnyKlucz: false, //czy klucz jest unikalny?
//...
}

3. W sekcji methods:

1
2
3
4
5
6
7
8
9
10
11
methods:
{
sprawdz: function(value)
                    {
                    //sprawdza AJAX czy jest już taki w bazie
                 axios
                        .get('https://adres/czy_dostepna_kategoria_json.php?kategorie=' + value)
                        .then( response => this.unikalnyKlucz = !!response.data && value.length>0 ); //może zostać dodany
                    },
//...
}

4.Do przycisku wysyłającego do bazy dodajemy :disabled=”!unikalnyKlucz”

1
<b-btn class="mt-3" variant="outline-danger" block :disabled="!unikalnyKlucz" @click="zapiszDoBazy">Zapisz</b-btn>

5. Jeszcze tworzymy plik sprawdzający klucz w bazie wywoływany AXIOSem:

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
<?php
//Zwraca true jeśli można dodać podany klucz GET do bazy (to znaczy nie ma już takiego samego)


include "../polacz.php";

$kategorie = $_GET["kategorie"];


if ($sql = $baza->prepare("SELECT kategorie FROM kategorie WHERE kategorie = ?"))
    {
        $sql->bind_param("s", $kategorie);
        $sql->execute();
        $sql->bind_result($kat);

       if($sql->fetch())
         echo "false";
          else
         echo "true"; //jeśli jest taki w bazie zwraca false - to znaczy nie można dodać
        $sql->close();
   
    }
    else die ("Błąd SQL - sprawdź zapytanie w MySQL");
$baza->close();

?>
JavaScript