How can I add items to an input using the enter key and only submit the form when i click a button?

Question

I'm using v-select and there is a problem with this plugin... When you press enter inside input, it submit to form. How can i add items to input using Enter and only submit the form when i click at Button?

Example Here CODE PEN

HTML

<div id="app">
  <h1>Vue Select</h1>
  <p>Try to add items in input using "ENTER"</p>
  <form v-on:submit.prevent="submited()">
  <v-select multiselect :options="options"></v-select>
    <button type="submit">Submit</button>
  </form>
</div>

JS

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ["some", "thing", "another", "things"]
  },
  methods: {
    submited(){
      alert('submited!')
    }
  }
})

Thanks!!

gautsch · Accepted Answer · 2017-09-29T16:22:12.710

I would prevent default on the form and then move the submitted logic to the button.

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ["some", "thing", "another", "things"]
  },
  methods: {
    submitted() {
      console.log('submited!')
    }
  }
})

body {
  font-family: 'Open Sans', sans-serif;
}

#app {
  max-width: 35em;
  margin: 1em auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@2.2.0/dist/vue-select.js"></script>
<div id="app">
  <h1>Vue Select</h1>
  <p>Try to add items in input using "ENTER"</p>
  <form v-on:submit.prevent="">
    <v-select multiple :options="options"></v-select>
    <button type="button" v-on:click="submitted()">Submit</button>
  </form>
</div>

See here: https://codepen.io/uidan/pen/PJjOyb

score 1 · Answer 2 · answered Sep 29 '17 at 16:21

If you just want to prevent the keypress on the particular component from submitting the form, but want to keep all the other default form behaviors (maybe including pressing Enter while on a different input, for example), you can catch the native keypress events on the component:

<v-select multiple :options="options" @keypress.native.prevent=""></v-select>

score 1 · Answer 3 · answered Sep 29 '17 at 16:25

Resolved, working perfectly.

   <div id="app">
      <h1>Vue Select</h1>
      <p>Try to add items in input using "ENTER"</p>
      <form v-on:submit.prevent="">
      <v-select multiple :value.sync="selected" :options="options"></v-select>
        <button type="submit" @click="submitedd()">Submit</button>
      </form>
    </div>


Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      options: ["some", "thing", "another", "things"]
    }
  },
  methods: {
    submitedd(){
      console.log("i am here");
    }
  }
})

How can I add items to an input using the enter key and only submit the form when i click a button?

3 Answers3