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>

可以吗？

如何在我的套管编辑器字段中根据myObject[n-element].text号码编辑myObject[n-element].textOutput和itemId，我该怎么做？（请注意[n-element] != itemId）。

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

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

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

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

1 个答案: