Vue - eventy 101 - CODELINE

Kolejna szybka lekcja na temat Vue, które musimy poznać, aby ruszyć Laravel + Inertia. Do dzieła.

Ok, nasza apka z poziomu markupu:

<div id="app">
        <form @submit="onSubmit" action="https://www.google.com">
            <input type="submit" value="Send"/>
        </form>
</div>

A teraz z poziomu JS:

const app = Vue.createApp({
    methods: {
        onSubmit(){
            alert("Submited")
        }
    },
    
  });
  
app.mount('#app');

Chyba nie będzie zaskoczeniem, że przeniesie nas na Google, choć alert wstrzyma ten proces aż do kliknięcia OK (to też zaskakiwać nie powinno).

Ok, zróbmy aby onSubmit przyjmował event:

const app = Vue.createApp({
    methods: {
        onSubmit(event){
            event.preventDefault();
            alert("Submited")
        }
    },
    
  });
  
app.mount('#app');

Pytanie, jak ten event przekazać. Dwa sposoby:

<div id="app">
        <form @submit="(evt) => onSubmit(evt)" action="https://www.google.com">
            <input type="submit" value="Send"/>
        </form>
</div>

Drugi, lepszy:

 <div id="app">
        <form @submit="onSubmit($event)" action="https://www.google.com">
            <input type="submit" value="Send"/>
        </form>
</div>

Koncept zmiennych specjalnych, odróżniających się od innych zmiennych znakiem dolara jest obecny w wielu frameworkach frontendowych (Vue, Alpine, AngularJS, nie mylić z Angularem).

Zmienna $event to event. Oczywiście inne argumenty też możemy przekazywać w tych nawiasach, a gdy nie przekazujemy żadnych, to decydujemy, albo są nawiasy, albo tylko nazwa metody.

Tylko computed properties NIE MOGĄ mieć nawiasów, ale to nie o nich lekcja. Ok, wywalamy preventDefault:

const app = Vue.createApp({
    methods: {
        onSubmit(){
            alert("Submited")
        }
    },
    
  });
  
app.mount('#app');

Ale nadal chcemy preventDefault. Jak to osiągnąć? Modyfikatorem eventu:

<div id="app">
        <form @submit.prevent="onSubmit" action="https://www.google.com">
            <input type="submit" value="Send"/>
        </form>
    </div>

Modyfikatorów jest dużo, np. sprawdź, czy użytkownik kliknął prawym przyciskiem myszy trzymając ctrl. Są intuicyjne i dobrze w dokumentacji opisane.

Vue – eventy 101