I am in need of implementing basic text editor functionality into an application.
I currently have a textarea where user input is reflected in a paragraph. I have implemented event listeners for spacebar and enter key presses within the textarea to trigger specific functions.
My goal is to ensure that when the user hits the enter key, a line break is inserted in the outputted text. However, I encounter the following error:
this.textBody.appendChildis not a function
This is my current approach:
new Vue({
el: "#app",
data: {
title: "",
textBody: ""
},
methods: {
logSpacebar: function(){
console.log("spacebar pressed");
//Fire corrector API?
},
logEnter: function(){
console.log("pressed enter");
var breakTag = document.createElement("br");
this.textBody.appendChild(breakTag);
}
}
})
The relevant HTML code (excerpt):
<input type="text" v-model="title"/>
<textarea name="" cols="30" rows="10" v-model="textBody" v-on:keyup.space="logSpacebar" v-on:keyup.enter="logEnter"></textarea>
<h2>Title: {{title}}</h2>
<p>Text body: {{textBody}}</p>