Cfrgtkky

I am trying to achieve something where in a given input I make the string editable or non editable(readonly) based on the context of the text in vue js.

For example :
I have a text: My Name is $John Doe$
Now my vue js code should iterate the string and the text between $ can be editable.

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 It's still making the process complicated and I am not achieveing proper output.

Any help will be hightly appreciated

many things are not going well :

q : "My name is $John Doe$ from NYC",

Not ending tag for your filters "}"

... Filters should be pure functions and
should not be dependent on this context. If you need this you should
use a computed property or just a method e.g. https://github.com/vuejs/vue/issues/5998

Here a basic solution with computed :

<div id="app">

   <textarea cols="10" rows="10" disabled>{{ qComputed }}</textarea>

   <input type="text" v-model="editText">

</div>



new Vue({

  el: "#app",

  data: {

    q: "My name is $John Doe$ from NYC",

    editText: null,

    disabled: true

  },

  computed: {

    qComputed(){

      let splittedText  = this.q.split('$')

      splittedText[1] = this.editText

      return splittedText.join` `

    }

  }

})

https://jsfiddle.net/jupg4ysz/