Vuejs v-select Submit

Question

I’m using the V-SELECT to make a select style Chosen. Well, it works! But when I use "ENTER" to insert new elements, it gives SUBMIT in the form. It’s like I give Submit only when I click the button and not when I give ENTER in the input?

Code Example 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!')
    }
  }
})

Answer 1

This select doesn’t seem to have a way to stop the submir event in the DOM. So you have to put a div for example around the component to stop Event.

You can do it like this:

 <div @keydown.prevent>
    <v-select multiple :options="options"></v-select>
 </div>

Codepen: https://codepen.io/sergiocrisostomo/pen/dVRZmx?editors=1010

I didn’t know this component. I use it a lot the iview library.