Emanuel Rista
Emanuel Rista

Reputation: 55

Vue Js - show an input value if ENTER is pressed

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

Answers (1)

Majed Badawi
Majed Badawi

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

Related Questions