how to change selected text in v-textarea Vue.js? - vue.js

Question

I want a function to be called when a button is clicked to change the selected text that is in a v-container, how can I do that?
I will be glad to any information
<template>
<div class="text">
<v-btn
#click="editText"
>
</v-btn>
<v-textarea
v-model="text"
></v-textarea>
</div>
</template>
<script>
export default {
name: "ArticleForm",
data() {
return {
text: 'some text',
}
},
methods: {
editText() {
... how?
}
}
}
</script>
<style scoped>
</style>

Answer 1

You can use window.getSelection for the selected text. Here is the demo
SFC:
<template>
<v-app>
<v-content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore facere
aspernatur explicabo voluptatibus? Non temporibus, dicta illum
perferendis error voluptatum. Rerum officiis debitis voluptas earum
nulla consequatur necessitatibus tenetur eius.
</div>
<v-btn class="my-5" #click="editText">Edit</v-btn>
<v-textarea v-model="text"></v-textarea>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data() {
return {
text: "",
};
},
methods: {
editText() {
if (window.getSelection) this.text = window.getSelection().toString();
},
},
};
</script>