Reputation: 55
I'm a beginner and I done this as i will show here, but I'm sure Vue is to make our job easier, not to complicate it. So I don't think my method is the best one. Do you have a smarter solution? (Obiously yes lol) Here's my effort. What do you think about it?
HTML:
<section id="trial">
<input @keyup="saveInput" type="text" @keyup.enter="confirmInput" />
<p> {{confirmedInput}} </p>
</section>
JS:
const app = Vue.createApp({
data() {
return {
userInput: '',
confirmedInput: ''
}
},
watch: {
},
computed: {
},
methods: {
saveInput(event) {
this.userInput = event.target.value;
},
confirmInput() {
this.confirmedInput = this.userInput;
}
}
});
app.mount('#trial');
Upvotes: 1
Views: 885
Reputation: 28414
You can use v-model
:
const app = new Vue({
el: "#trial",
data() {
return {
userInput: '',
confirmedInput: ''
}
},
methods: {
confirmInput() {
this.confirmedInput = this.userInput;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="trial">
<section id="trial">
<input v-model="userInput" type="text" @keyup.enter="confirmInput" />
<p> {{confirmedInput}} </p>
</section>
</div>
Upvotes: 2