My attempts at updating a string when the content is changed inside a textarea are not successful.
Vue component:
<template>
<div>
<textarea :value="text" @change="changed = true" @keyup="changed = true"></textarea>
<div class="buttons">
<button @click.prevent="saveChanges">Save Changes</button>
<button @click.prevent="discardChanges">Discard Changes</button>
</div>
</div>
</template>
<script>
export default {
name: "Editor",
props: ["fileText"],
data() {
return {
changed: false,
text: this.fileText,
sendText: "",
};
},
computed: {
getCurrentText() {
return this.text;
}
},
methods: {
emitToParent() {
this.$parent.$emit("custom-event", this.changed);
},
saveChanges() {
if (this.changed) {
console.log("I changed");
this.sendText = this.getCurrentText;
this.changed = false;
this.$emit("close");
console.log(this.sendText);
} else {
this.$emit("close");
}
},
discardChanges() {
this.text = this.fileText;
this.$emit("close");
},
},
};
</script>
Despite my efforts to modify text in the textarea, the Save Changes button does not reflect those changes and returns the unmodified text.
In essence, I aim to update the text within a file. The component mentioned above retrieves the fileText from its parent element and should relay back any modified text to the parent. This process ensures that the file's content is updated only when there are actual modifications.
This version is preliminary and subject to alterations.