VueJS v-select submit

2

I am using V-SELECT to do a select style Chosen . Well, it works! But when I use "ENTER" to insert new elements, it gives SUBMIT in the form. Is it possible for me to give submit only when I click the button and not when giving ENTER in input ?

CODE PEN Example Code

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!')
    }
  }
})
    
asked by anonymous 29.09.2017 / 17:59

1 answer

4

This select does not seem to stop the supress event in the DOM. So you have to put a div for example around the component in order to stop the event.

You can do it like this:

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

Codepen: link

I did not know about this component. I use the iview library .

    
29.09.2017 / 18:07