Poznajemy bardzo ważny koncept przy pracy z frameworkami frontendowymi, zwłaszcza w kontekście reaktywnych formularzy. Do dzieła.
Ok, oto nasz markup:
<div id="app">
<input type="text" :value="name" @input="onInput($event)"/>
<p>Hello {{name}}</p>
</div>I nasz JS:
const app = Vue.createApp({
data(){
return {
name: "",
};
},
methods: {
onInput(event){
this.name = event.target.value;
}
},
});
app.mount('#app');
Zamiast $event, możemy skorzystać z $refs:
<div id="app">
<input type="text" :value="name" @input="onInput" ref="ipt"/>
<p>Hello {{name}}</p>
</div>I w JS:
const app = Vue.createApp({
data(){
return {
name: "",
};
},
methods: {
onInput(){
this.name = this.$refs.ipt.value;
}
},
});
app.mount('#app');
Tak czy inaczej mamy tu dwustronny przepływ danych. Dane są pobierane z inputu a zarazem wysyłane z powrotem do niego. Niech to nam się w głowie ułoży, bo zazwyczaj mamy jednostronny przepływ danych w frontendowych frameworkach.
Może poznanie dyrektywy v-model pomoże:
<div id="app">
<input type="text" v-model="name" ref="ipt"/>
<p>Hello {{name}}</p>
</div>V-model oznacza:
- Weź wartość z inputu i wyślij do name
- Weź wartość z name i zaciągnij jako wartość inputu
Jest to krótsza wersja tego:
<div id="app">
<input type="text" :value="name" @input="onInput($event)"/>
<p>Hello {{name}}</p>
</div>Musimy to sobie w głowie ułożyć.
