In this example, I am trying to prevent a newline from being created in a textarea when the Enter key is pressed. To achieve this, I use the preventDefault method in my event handler and update the value inside the textarea. However, I encounter an issue where the model does not get updated due to using preventDefault.
Instead of using this.value (Vue model), I opt for el.value to update the element because I want to maintain the cursor position. If I were to update the model data, the cursor would reset to the end after the view is rendered, making it difficult to control its position.
To address the cursor position issue, I need to utilize a workaround with $nextTick:
this.$nextTick(() => {
el.setSelectionRange(cursorPos, cursorPos);
})
My goal is to keep things simple without complicating them or triggering a re-render of the view by altering the model. I simply want Vue to detect changes in the input's value. It feels like I may have to manually emit an Event (such as triggering an input event for the textarea) to achieve this, but I am unsure how to do so.
new Vue({
el: '#app',
data: {
value: 'Hello.World'
},
methods: {
fixGreeting(evt) {
evt.preventDefault();
let el = evt.target;
let cursorPos = el.selectionStart;
el.value = el.value.replace('.', ' ');
el.setSelectionRange(cursorPos, cursorPos);
}
}
});
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80f6f5e5c0b2aeb5aeb1b7">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<textarea v-on:keydown.enter="fixGreeting" v-model="value"></textarea> Model: {{ value }}
</div>