Vue - props validation

Kolejna szybka lekcja w temacie Vue.js, którego musimy się nauczyć, aby mieć reaktywny frontend. Do dzieła.

Ok, tworzymy nowy komponent:

<template>
    <div class="green">
      <h1>Name: {{ name }} Age: {{ age }}</h1>
      <slot></slot>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PropsComponent',
    props: {
      name: {
        type: String,
        default: "Unknown"
      },
      age: {
        type: Number,
        required: true
      }
    }
  }
  </script>
  
  <style scoped>

  .green {
    color: #42b983;
  }
  </style>

Dodajemy w App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <FirstComponent msg="My Message">
    <p class="green">And this is slot content</p>
  </FirstComponent>
  <p class="green">I dont have green class</p>
  <PropsComponent>
    <p>I am slot</p>
  </PropsComponent>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import FirstComponent from './components/FirstComponent.vue'
import PropsComponent from './components/PropsComponent.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    FirstComponent,
    PropsComponent
  }
}
</script>

ESLinta nam krzyczy, jeżeli dodaliśmy, ale nie użyliśmy komponentu i nie chce się kompilować (od tego on jest, możemy bez Vue CLI i bez tych narzędzi się bawić, z drugiej strony możemy też chcieć mieć jeszcze TypeScript, właśnie dla bezpieczeństwa, bo programując w innych językach możemy nawet nie zdawać sobie sprawy jak bardzo niebezpieczny jest JS z tym jego niedbalstwem i dynamicznością).

Ok, fajnie. Nie podaliśmy name, ale default wskoczył. Nie podaliśmy age, choć był required, i… nic. W konsoli mamy Vue.warn.

To nie backend, żeby fail walidacji od razu coś zatrzymywał. To dla nas jest walidacja, i dla nas informacja, to nie użytkownik coś zepsuł, tylko my, jeżeli nie podajemy tego propu.

Albo o tym wiemy i nie powinniśmy w pierwszy miejscu takich błędów robić, albo nie wiemy, jest to wypadek przy pracy, tym bardziej nie ma sensu czegokolwiek zatrzymywać.

Tak się we frontendzie nie działa. Od początku jego istnienia, jeszcze jak nie było CSS a HTML dopiero powstawał. Możemy to sprawdzić pisząc błędny HTML i patrząc, czy z powodu ewidentnej głupoty coś się nam zatrzymało, jakiś error jest, coś przestało odpowiadać?

Bo errory walidacji (backend, frontend choć to bez sensu, bo te wszystkie atrybuty walidujące byle dzieciak jest w stanie usunąć z kodu po stronie klienta) to jest efekt działania użytkownika. Zaś takie błędy to efekt działania programisty.

Chcemy być ich świadomi, niekoniecznie chcemy, aby one coś zatrzymywały.

I tak robimy dużo – taki ESLint nie pozwoli nam zaimportować czegoś i nie użyć, jak w jakimś Golangu normalnie.

Ok, dygresje na bok. Spróbujmy wrzucić propsy jak należy (to nie jest jak należy btw):

<PropsComponent name="John Doe" age="30">
    <p>I am slot</p>
</PropsComponent>

Warn dalej tam jest, tylko teraz krzyczy, że niewłaściwy typ. Ok, spróbujmy dynamicznie:

<PropsComponent name="John Doe" :age="30">
    <p>I am slot</p>
  </PropsComponent>

Ok, poznajmy jeszcze validatora:

  <script>
  export default {
    name: 'PropsComponent',
    props: {
      name: {
        type: String,
        default: "Unknown"
      },
      age: {
        type: Number,
        required: true,
        validator: function(value){
            return value >= 18;
        }
      }
    }
  }
  </script>

Teraz jak przekażemy np. 16, to również będzie warn od Vue, że walidacja padła.

Vue – props validation