Vuejs prevent adding new line in contenteditable

Question

How can i prevent enter from adding new line in contenteditable div. I have tried @keyup.enter.prevent but it's not working. also tried @keyup.enter.prevent & @keyup.enter.stop.prevent but no luck.

Answer 1

You need keydown instead, when you reach the keyup event the browser has already inserted whatever key you pressed into the input.

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>