vue页面内多个input绑定keyup.enter.native失效

如果一个Vue页面内有多个input元素，绑定keyup.enter.native事件可能会失效。这是因为当按下enter键时，Vue会默认触发第一个匹配的元素的事件，而不是当前聚焦的元素。

解决方法是使用Vue的$refs属性来引用当前聚焦的元素，并在事件处理程序中使用它来执行相应的操作。代码示例如下：

<template>
  <div>
    <input ref="input1" v-model="input1Value" @keyup.enter.native="handleInput1Enter">
    <input ref="input2" v-model="input2Value" @keyup.enter.native="handleInput2Enter">
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1Value: '',
      input2Value: ''
    }
  },
  methods: {
    handleInput1Enter() {
      // 在这里处理input1的enter事件
      console.log('input1 enter');
    },
    handleInput2Enter() {
      // 在这里处理input2的enter事件
      console.log('input2 enter');
    }
  }
}
</script>

在事件处理程序中，我们可以使用this.$refs.input1和this.$refs.input2来引用当前聚焦的input元素，并执行相应的操作。这样就可以避免多个input元素绑定keyup.enter.native事件时的冲突问题。