I’m working on a way to make certain parts of a string in an input editable or non-editable (readonly) depending on the context in Vue.js.
For instance: I have this text: My Name is $John Doe$ Now, I want my Vue.js code to scan the string and allow editing only the text between $ signs.
HTML:
<template>
<textarea cols="10" rows="10" disabled>{{q | makeTextEditableByCondition}}</textarea>
<input type="text" v-model="editText">
</template>
<script>
export default {
data() {
q : "My name is $John Doe$ from NYC,
editText: null,
disabled: true
}
filters:{
makeTextEditableByCondition(text){
let splittedText = text.split("$");
let this.editText = splittedText[1]
splittedText.splice(1,1)
return splittedText.join(" ")
}
</script>
But the process is still complex and not yielding the desired output.
Any assistance would be greatly appreciated.