javascript - 使用 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",

过滤器没有结束标记“}”

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

这是一个带有计算的基本解决方案:

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