Vuejs Computed Setter与对象双向数据绑定

Question

按照基本示例，双向数据绑定的工作原理如下：

<template>
<input v-model="fullname"/>
<input v-model="first"/>
<input v-model="last"/>
</template>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        first: '',
        last: ''
      },
      computed: {
        fullname: {
          // getter function
          get: function() {
            return this.first + " " + this.last
          },
          // setter function
          set: function(value) {
            var name = value.split(' ')
            this.first = name[0]
            this.last = name[1]
          }
        }
      }
    })
</script>

如下所示：https://youtu.be/PuxdMnk-u5k?t=17m43s（17:43） - 您可以在fullname输入中轻松修改名字和姓氏的数据。

现在我的情况有点不同了。我有一个对象如下：

myObject: [
   {active: true, itemId: "55", text: 'some text', textOutput: ''}
   {active: true, itemId: "56", text: 'some text', textOutput: ''}
   {active: true, itemId: "58", text: 'some text', textOutput: ''}
   {active: true, itemId: "65", text: 'some text', textOutput: ''}
   {active: true, itemId: "105", text: 'some text', textOutput: ''}
]

接下来我通过计算修改这一点 - 这里只需添加到每个项目<li>标签：

modifyArrayItem () {
  var output=''
    for (var i=0; i<this.myObject.length; i++) {
      if (this.myObject[i].active) {
        this.myObject[i].textOutput= '<li>' + this.myObject[i].text + '</li>'
        output = output + this.myObject[i].textOutput
      }
      else {
        this.myObject[i].textInput = ''
      }          
    }
    return output
  }, 

然后通过v-html仅输出活动项目

<div  v-html="modifyArrayItem"></div>

容易到目前为止。现在我希望能够在我的html中编辑输出，让我们说像这样的quill-editor：

<quill-editor v-model="modifyArrayItem" :options="options"></quill-editor>

可以吗？

我应该怎么做才能在我的羽毛笔编辑器字段中根据myObject[n-element].text编号编辑myObject[n-element].textOutput和itemId？ （请注意[n-element] != itemId）。

如何防止在编辑时动态更改每个元素的myObject.active为true / false时编辑的数据丢失？如何将编辑后的文本保存到分隔变量中？

编辑：一些想法 - 为每个<li>添加一些带有itemId值的不可见标签到quill-editor？

Answer 1

对的，这是可能的。您可以将HTML解析为行，并将行分配给myObject中的相应条目。

但是，请注意，每次键入内容时更新编辑器的内容都会导致光标移动到编辑器的开头。

事实证明，羽毛笔有一种获取和设置选择位置的方法。它有点毛茸茸，因为每次编辑调用设置两次，所以你必须检查是否有任何实际变化。但这有效：

modifyArrayItem: {
  get() {
    return this.myObject.map(o => "<li>" + o.text + "</li>").join("");
  },
  set(newValue) {
    const oldLines = this.myObject.map((o) => o.text);
    const lines = newValue.split("</p>")
      .map((p) => p.replace('<p>', ''));
    const same = oldLines.join('') === lines.join('');

    if (!same) {
      const pos = this.$refs.quill.quill.getSelection();
      for (let i=0; i < this.myObject.length; ++i) {
        this.myObject[i].text = lines[i];
      }
      this.$nextTick(() => {
        this.$refs.quill.quill.setSelection(pos);
      });
    }
  }
}

Updated codepen