2

Estou usando o V-SELECT para fazer um select estilo Chosen. Bom, ele funciona! Mas quando eu uso "ENTER" para inserir novos elementos, ele dá SUBMIT no form. Tem como eu dar submit apenas quando clicar no botão e não quando dar ENTER no input?

Código Exemplo 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!')
    }
  }
})

1 Resposta 1

5

Esse select não parece ter como parar o evento de submir no DOM. Assim tens de colocar uma div por exemplo à volta do componente para poder parar o event.

Podes fazer isso assim:

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

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

Não conhecia esse componente. Eu uso muito a biblioteca iview.

4
  • 2
    Eita, curti essa iview Commented 29/09/2017 às 16:09
  • @RafaelAugusto eu também, por isso escolhi usar no trabalho :)
    – Sergio
    Commented 29/09/2017 às 16:13
  • 1
    vou começar a usar tambem, eu estava utilizando o Vuetify Commented 29/09/2017 às 16:16
  • 1
    Legal @Sergio !! Obrigado pela ajuda e pela dica do iview :)
    – Jackson
    Commented 29/09/2017 às 17:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .