vue enter.exact

組合鍵無效

by ysuper

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="messages">
    <div v-for="m in messages">{{ m }}</div>
  </div>

  <input type="text" 
    placeholder="輸入任意文字後，試試同時按下 Ctrl + Enter 鍵與只按 Enter 的差異"
    v-model.trim="msg" 
    @keydown.enter.exact="addToMessages">
</div>

SCSS

#app {
  display: block;  
  width: 100%;
  padding-top: 1rem;
}

.messages {
  padding: 6px 10px;
  width: 95%;
  height: 100px;
  margin-bottom: 1em;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

input[type="text"] {
  padding: 3px 5px;
  width: 95%;
}

JavaScript

const vm = Vue.createApp({
  data: () => {
    return {
      msg: '',
      messages: []
    }
  },
  methods: {
    addToMessages() {
      this.messages.push(this.msg);
      this.msg = '';
    }
  }
}).mount('#app');