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

by

1👍

✅

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

👤gautsch

1👍

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>
👤Roy J

1👍

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");
    }
  }
})
👤Oyewole A. Samuel

Leave a comment