點擊 Enter 之後，執行某一支 Function | Vue.js

By Casey | August 31, 2022 | 1 minutes

使用 v-on:keyup.enter='function name' 綁定 input 或是 form。

起初寫的時候，以為 v-on:keyup.enter 要綁在 button 上，但是實際上其實是 form (或是其他的 input)，以 form 為主體， trigger Enter 鍵之後，呼叫 login function，即可執行成功。

1
2
3
4
5
6
7
<div id="app">
  <form v-on:keyup.enter="login">
    <input type="text" />
    <input type="text" />
    <button type="button" @click="login">Login</button>
  </form>
</div>

1
2
3
4
5
6
7
8
new Vue({
  el: "#app",
  methods: {
    login() {
      alert("CLICKED!");
    },
  },
});

參考資料: On key press of Enter, click a button in vuejs