具有对象双向数据绑定的 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) - 您可以在全名输入中轻松修改名字和姓氏数据。

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

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>

可以吗？

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

如何在编辑时将每个元素的myObject.active 动态更改为真/假，以防止编辑后的数据丢失？将编辑后的文本保存到单独的变量中怎么样？

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

Answer 1

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

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

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

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