lesson 24: add keyup event

This commit is contained in:
Andreas Zweili 2021-01-18 18:23:34 +01:00
parent e1524b4661
commit 953fd0fb9e
2 changed files with 6 additions and 2 deletions

View File

@ -3,9 +3,13 @@ const app = Vue.createApp({
return { return {
counter: 0, counter: 0,
name: "", name: "",
confirmedName: "",
}; };
}, },
methods: { methods: {
confirmName() {
this.confirmedName = this.name;
},
submitForm() { submitForm() {
alert("Submitted"); alert("Submitted");
}, },

View File

@ -20,8 +20,8 @@
<button v-on:click="increaseCounter(10)">Add 10</button> <button v-on:click="increaseCounter(10)">Add 10</button>
<button v-on:click="decreaseCounter(5)">Reduce 5</button> <button v-on:click="decreaseCounter(5)">Reduce 5</button>
<p>Result: {{ counter }}</p> <p>Result: {{ counter }}</p>
<input type="text" v-on:input="setName($event, 'SomeOtherINput')"> <input type="text" v-on:input="setName($event, 'SomeOtherINput')" v-on:keyup.enter="confirmName" />
<p>Your Name: {{name}}</p> <p>Your Name: {{ confirmedName }}</p>
<form v-on:submit.prevent="submitForm"><input type="text"><button>Sign Up</button></form> <form v-on:submit.prevent="submitForm"><input type="text"><button>Sign Up</button></form>
</section> </section>
</body> </body>