Vuejs мешает добавить новую строку в contenteditable

Question

Как я могу предотвратить ввод новой строки в contenteditable div? Я пробовал @ keyup.enter.prevent, но он не работает. также попытался @ keyup.enter.prevent & @ keyup.enter.stop.prevent, но не повезло.

Answer 1

Вместо этого вам нужно keydown, когда вы достигнете события keyup, браузер уже вставил любую клавишу, которую вы нажали на входе.

new Vue({
  el: "#app",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div contenteditable="true" @keydown.enter.prevent>edit me</div>
</div>