为什么Vue和我的DOM Textarea不同步（不是反应性问题）？

Question

我有一个看似与反应性有关的怪异错误，但据我所知，它与反应性无关。

我正在使用渲染功能来渲染文本区域。

console.log('The value...', self.value);
return createElement("textarea", {
  ...commonAttributes,
}, (self.value));

这一直到检查器域都有效。例如，当我将textarea的绑定值设置为“ abc”时，控制台（self.value）将成功显示“ abc”，，甚至检查器也将“ abc”显示为内部文本 < / p>

<textarea data-v-c477da9c="" class="TextInput TextInput--multiline TextInput--full-width" data-v-513a62da="">abc</textarea>

但是，“可见”文本区域仍位于最后的“用户输入”值。当我开始键入内容时，内部值将重置为在可见DOM元素中看到的值。

Answer 1

<textarea>元素的内部文本仅指定默认值；修改它不会更新textarea的值。当Vue重新渲染后修补DOM时，它将重用现有的textarea元素并更改其内部文本，因为这就是您要更改的内容。

您需要通过value属性设置textarea的值，并处理input事件以更新组件的数据。

new Vue({
  el: '#app',
  data: {
    text: 'Hello',
  },
  render(h) {
    return h('div', [
      h('pre', [this.text]),
      h('textarea', {
        domProps: {
          value: this.text
        },
        on: {
          input: e => this.text = e.target.value
        }
      })
    ])
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>