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

【问题标题】：How can I add items to an input using the enter key and only submit the form when i click a button?如何使用回车键将项目添加到输入中，并且仅在单击按钮时提交表单？
【发布时间】：2017-09-29 15:56:44
【问题描述】：

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

Example Here 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>

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ["some", "thing", "another", "things"]
  },
  methods: {
    submited(){
      alert('submited!')
    }
  }
})

谢谢！！

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-select

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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");
    }
  }
})

【讨论】：