In my project, I have implemented a textarea that calls a specific function whenever the space key is pressed. This function is designed to check if the last part of the entered text resembles a URL. If it does, the function creates a preview below and removes that segment of text from the input field. Everything works smoothly in this scenario. Now, I am facing an issue where I want the same function to be triggered when a user pastes content into the textarea. The problem arises because the input is linked via v-model to post.description in the data object. Strangely, when @paste triggers the function, the data in post.description turns empty, whereas it remains populated when the function is called by pressing the space key.
<div id="post-share" class="form-group">
<textarea
id="post-description"
class="form-control"
name="post-description"
cols="40"
rows="5"
@keyup.space="checkUrl"
@paste="checkUrl"
v-model="post.description"
></textarea>
The function implementation looks like this:
checkUrl() {
if (this.post.video_link === "") {
console.log("entro 1");
let link = [];
const regex = /((?:https?:|www\.)[^\s]+)/g;
let url = this.post.description.match(regex);
console.log(this.post.description);
if (url) {
console.log("entro 2");
url.forEach((match, groupIndex) => {
link = match.split("=");
this.$set(this.post, "video_link", link[1]);
this.is_there_url = true;
this.post.description = this.post.description.replace(match, "");
});
}
}
}
As mentioned earlier, the if (url) condition fails when triggered by @paste due to the empty this.post.description. Any ideas why it's only empty on @paste and not when the space key is pressed?