javascript - 如何使用回车键将项目添加到输入中，并且仅在单击按钮时提交表单？

Question

我正在使用 v-select 并且此插件存在问题...当您在输入中按enter时，它会提交到表单。如何使用 Enter 将项目添加到输入中，并且仅在单击Button时才提交表单？

此处示例 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

我会阻止表单的默认设置，然后将提交的逻辑移动到按钮。

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>

见这里： https ://codepen.io/uidan/pen/PJjOyb

Answer 2

如果您只想阻止特定组件上的按键提交表单，但希望保留所有其他默认表单行为（例如，可能包括在不同输入上按 Enter 键），您可以在组件：

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

Answer 3

已解决，完美运行。

   <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");
    }
  }
})