@ keyup.enter意外结果

Question

I have a single form with two vue 2.0 components. On both components I have a single input field, combined with a @keyup.enter:

(Component#1) @keyup.enter="addItem"

(Component#2) @keyup.enter="addVariantItem"

If the focus is on one of the inputs and I press enter, BOTH functions addItem and addVariantItem are called.

 <template> <input type="text" class="form-control form-control-sm" id="variant-sku" placeholder="SKU" v-model="variantItemSku" @keyup.enter="addVariantItem()"> </template> <script> export default { data: function (){ return { variantItemSku: '' }; }, methods: { addVariantItem: function () { axios .post('/articles/' + this.article + '/variants', { sku: this.variantItemSku }) } } } </script> <style scoped> </style> 

 <template> <input type="text" class="form-control form-control-sm" id="cross-seller-sku" placeholder="SKU" v-model="crossSellerSku" @keyup.enter="addItem()"> </template> <script> export default { data: function (){ return { crossSellerSku: '' }; }, methods: { addItem: function () { axios .post('/articles/' + this.article + '/cross-sellers', { sku: this.crossSellerSku }) } } } </script> <style scoped> </style> 

ie I am in the "variant-sku" input and hit enter, addVariantItem() gets called, but also addItem in the other component ... Other way around, focus on "cross-seller-sku" causes the same result.

Is there some way to limit the @keyup.enter to the current focussed input? Right now it only works if one of the two inputs is focussed, if there is no focus nothing happens.

Is there a bug, so that the keyup.enter is called on every input?

Answer 1

解决方案是将@ keyup.enter =“ function”更改为@ keydown.enter.prevent =“ function”，因为输入的默认行为在@keydown上起作用，而不是在@keyup上起作用，您必须覆盖它。