来自父级的 Vue watch 值是反向的

Question

我有一个自定义组件，它允许用户输入文本并将其发送到后端，在那里我进行一些计算并吐出新文本，其中包含 html。

我的问题是，当用户在此文本区域中键入内容时，它会反转所有文本并将光标保持在文本区域的开头。所以现在 'foo bar' 变成了 'rab oof'... 这只是在我添加 watch 之后才发生的。我可以删除观察者，但我需要它（或需要另一种方式）通过 foo 变量将我的更新应用到文本区域，当我将 foo 设置为来自父项的值时。

console.log(v) 写出反向文本。知道如何改变这个吗？

自定义组件：

    <template>
  <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
  name: 'htmlTextArea',
  props:['value'],
  mounted: function () {
    this.$el.innerHTML = this.value;
  },
  watch: {
    value(v) {
      this.$el.innerHTML =  v; //v is the reverse text. 
    }
  },
  methods: {
    updateHTML: function(e) {
      this.$emit('input', e.target.innerHTML);

    }
  }
}
</script>

使用自定义组件的家长：

    <htmlTextArea id="textarea" v-model="foo"></htmlTextArea>

...
<script>
...
methods: {
        triggerOnClick() {
            this.foo = 'something';//Without the watcher, when I change this.foo to something the actual textarea does not display the new data that I assigned to foo. But in Vue dev tools I can see the new change. 
        }

更新：

Vue.component('html-textarea',{
  template:'<div contenteditable="true" @input="updateHTML"></div>',
  props:['value'],
  mounted: function () {
    this.$el.innerHTML = this.value;
  },
  watch: {
    value(v) {
      this.$el.innerHTML =  v;
    }
  },
  methods: {
    updateHTML: function(e) {
      this.$emit('input', e.target.innerHTML);

    }
  }
});

new Vue({
  el: '#app',
  data () {
        return {
            foo: '',
        }
    }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">Type here:
 <html-textarea spellcheck="false" id="textarea" v-model="foo">        </html-textarea>
</div>

Answer 1

问题是，当您设置 contenteditable 元素的 innerHTML 时，您会失去选择（光标位置）。

所以您在设置的时候应该进行以下步骤：

保存当前光标位置；
设置innerHTML;
恢复光标位置。

保存和恢复是棘手的部分。幸运的是，我得到了这两个方便的功能，可以为最新的 IE 和更新的 IE 完成工作。见下文。

function saveSelection(containerEl) {
  var range = window.getSelection().getRangeAt(0);
  var preSelectionRange = range.cloneRange();
  preSelectionRange.selectNodeContents(containerEl);
  preSelectionRange.setEnd(range.startContainer, range.startOffset);
  var start = preSelectionRange.toString().length;

  return {
    start: start,
    end: start + range.toString().length
  }
}

function restoreSelection(containerEl, savedSel) {
  var charIndex = 0, range = document.createRange();
  range.setStart(containerEl, 0);
  range.collapse(true);
  var nodeStack = [containerEl],
    node, foundStart = false,
    stop = false;

  while (!stop && (node = nodeStack.pop())) {
    if (node.nodeType == 3) {
      var nextCharIndex = charIndex + node.length;
      if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
        range.setStart(node, savedSel.start - charIndex);
        foundStart = true;
      }
      if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
        range.setEnd(node, savedSel.end - charIndex);
        stop = true;
      }
      charIndex = nextCharIndex;
    } else {
      var i = node.childNodes.length;
      while (i--) {
        nodeStack.push(node.childNodes[i]);
      }
    }
  }

  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}


Vue.component('htmltextarea', {
  template: '#hta',
  name: 'htmlTextArea',
  props:['value'],
  mounted: function () {
    this.$el.innerHTML = this.value;
  },
  watch: {
    value(v) {
      if (v === 'yes') {
        let selection = saveSelection(this.$el);
        this.$el.innerHTML = 'no!';
       this.$emit('input', 'no!');
        restoreSelection(this.$el, selection);
      }
    }
  },
  methods: {
    updateHTML: function(e) {
      this.$emit('input', e.target.innerHTML);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    foo: 'Clear this and type "yes" (without the quotes). It should become "no!".'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <htmltextarea id="textarea" v-model="foo"></htmltextarea>
  <hr>
  Result: <pre>{{ foo }}</pre>
</div>
<template id="hta">
    <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>

在您的应用中，我建议您将它们放在专用的 .js 文件中，以便更好地组织。

来自父级的 Vue watch 值是反向的

Vue watch value from parent is in reverse

vue.js

vuejs2