title: Vuejs Computed Setter with an object two way data binding
body: <p>Following the basic example how two-ways databinding works:</p>
  
  <pre><code>&lt;template&gt;
  &lt;input v-model="fullname"/&gt;
  &lt;input v-model="first"/&gt;
  &lt;input v-model="last"/&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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]
            }
          }
        }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>As shown here: <a href="https://youtu.be/PuxdMnk-u5k?t=17m43s" rel="nofollow noreferrer">https://youtu.be/PuxdMnk-u5k?t=17m43s</a> (17:43) - you can easily modify data of first and last name within fullname input.</p>
  
  <p>Now my case is just a little different. I've got an object as below:</p>
  
  <pre><code>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: ''}
  ]
  </code></pre>
  
  <p>next I modify this a little bit via computed - here just add to each item <code>&lt;li&gt;</code> tags:</p>
  
  <pre><code>modifyArrayItem () {
    var output=''
      for (var i=0; i&lt;this.myObject.length; i++) {
        if (this.myObject[i].active) {
          this.myObject[i].textOutput= '&lt;li&gt;' + this.myObject[i].text + '&lt;/li&gt;'
          output = output + this.myObject[i].textOutput
        }
        else {
          this.myObject[i].textInput = ''
        }          
      }
      return output
    }, 
  </code></pre>
  
  <p>and then outputing only active items via v-html</p>
  
  <pre><code>&lt;div  v-html="modifyArrayItem"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Easy so far. Now I want to be able to edit output in my html via, let's say quill-editor like this:</p>
  
  <pre><code>&lt;quill-editor v-model="modifyArrayItem" :options="options"&gt;&lt;/quill-editor&gt;
  </code></pre>
  
  <p>Can it be done?</p>
  
  <p>What should I do to be able to edit <code>myObject[n-element].text</code> and <code>myObject[n-element].textOutput</code> basing on <code>itemId</code> number within my quill editor field? (please note that <code>[n-element] != itemId</code>).</p>
  
  <p>How to prevent edited data loss on dynamically changing <code>myObject.active</code> of each element to true/false  while editing? How about saving edited text into seperated variable?</p>
  
  <p>edit: some idea - add some kind of invisible tag with itemId value to quill-editor for each <code>&lt;li&gt;</code>?</p>