使用Vue Js根據輸入使文本可編輯/只讀

Question

我正在嘗試實現一些功能，其中基於vue js中的文本上下文，在給定的輸入中使字符串可編輯或不可編輯（只讀）。

例如：我有一個文本：我的名字是$ John Doe $現在，我的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

這是一個使用compute的基本解決方案：

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