Сделать текст редактируемым / только для чтения на основе ввода с помощью Vue Js

Question

Я пытаюсь достичь чего-то, где в данном вводе я делаю строку редактируемой или не редактируемой (только для чтения), основываясь на контексте текста в vue js.

Например: У меня есть текст: Меня зовут $ Джон Доу $ Теперь мой код vue js должен повторять строку, и текст между $ можно редактировать.

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>

Но это все еще усложняет процесс, и я не достигаю правильного результата.

Любая помощь будет высоко оценена

Answer 1

у многих дела идут не так:

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

Не заканчивающийся тег для ваших фильтров "}"

... Фильтры должны быть чистыми функциями и не должны зависетьв этом контексте.Если вам это нужно, вы должны использовать вычисляемое свойство или просто метод, например https://github.com/vuejs/vue/issues/5998

Вот базовое решение с вычисленным:

<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/