我正在使用 v-select,但这个插件有问题...当您在输入中按 enter 时,它会提交到表单。如何使用 Enter 将项目添加到输入中,并且仅在单击按钮时提交表单?
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!')
}
}
})
谢谢!!
最佳答案
我会阻止表单上的默认设置,然后将提交的逻辑移至按钮。
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>
关于javascript - 如何使用回车键将项目添加到输入中,并且仅在单击按钮时提交表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46492695/