Javascript Vue.js中可编辑文本区域的树视图

我有把小提琴：

我想稍微修改一下，并希望将每个节点显示为包含相应文本的文本区域。此外，我想给一个选项，以'答复'。这意味着插入一个新的文本区域，我们可以在其中输入文本

代码如下：

<script type="text/x-template" id="item-template">
  <li>
    <div
      :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      {{ model.name }}
      <span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <item
        class="item"
        v-for="(model, index) in model.children"
        :key="index"
        :model="model">
      </item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>



var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
}

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  }
})

{{model.name}
[{{打开？'-'：'+'}}]

+


（您可以双击某个项目以将其转换为文件夹。）

风险值数据={
名字：'我的树'，
儿童：[
{name:'你好'}，
{name:'wat'}，
{
名称：“子文件夹”，
儿童：[
{
名称：“子文件夹”，
儿童：[
{name:'你好'}，
{name:'wat'}
]
},
{name:'你好'}，
{name:'wat'}，
{
名称：“子文件夹”，
儿童：[
{name:'你好'}，
{name:'wat'}
]
}
]
}
]
}
//定义项目组件
Vue.组件（'项目'{
模板：“#项目模板”，
道具：{
模型：对象
},
数据：函数（）{
返回{
开放：假
}
},
计算：{
isFolder:函数（）{
返回此.model.children&&
这个。模型。儿童。长度
}
},
方法：{
切换：函数（）{
if（此.isFolder）{
this.open=！this.open
}
},
changeType:函数（）{
如果（！this.isFolder）{
Vue.set（this.model，‘children’，[]）
this.addChild（）
this.open=true
}
},
addChild:函数（）{
这个。模特儿。孩子们。推({
名称：“新事物”
})
}
}
})
//启动演示
var demo=新的Vue({
el:'演示'，
数据：{
treeData：数据
}
})

---

这个用例的模板是什么

如果我不理解你的问题

替换

{{model.name}} 

与

应该有用吗

<textarea v-model="model.name"></textarea>