Using v-for with the component textarea is left after object array reset

[kickthemooon]

I'm submitting a ...

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• Trumbowyg version : 2.9
• Vue.js version : 2.5.11
• Browser name and version : Chrome
• This package version : 3.1.1

Current behavior I have an array of objects in my data and use this component with v-for. When I push a new object to the array everything is fine, a new trumbowyg editor appears.

The problem arises when I do this.objects = [{content: ''}]. So on reset of the object array trumbowyg is gone but a "naked" textarea is still there.

Expected behavior That nothing is left after I reset the object area.

Minimal reproduction of the problem with instructions

1. Set up an object array that is not empty
2. Use v-for on this component
3. Reset the object array value

[ankurk91]

Can you share your code? I have tried to replicate your issue but couldn't.

<div id="app">
  <h3>
   Vue Trumbowyg v3 demo
   </h3>
  <button @click.prevent="add">
    Add another
  </button>
  <button @click.prevent="remove">
    Remove
  </button>
  <div v-for="(object, index) in objects">
    <button @click.prevent="reset(index)">
      Reset content
    </button>
    <trumbowyg v-model="object.content" :config="config" class="editor"> </trumbowyg>
  </div>
</div>

   Vue.component('Trumbowyg', VueTrumbowyg.default);

   new Vue({
     el: '#app',
     data: {
       objects: [{
         content: '1'
       }, {
         content: '2'
       }],
       config: {

       }
     },
     mounted() {
       console.log('app mounted')
     },
     methods: {
       add() {
           this.objects.push({
             content: 'Time: ' + +new Date()
           })
         },
         remove() {
           this.objects.splice(-1)
         },
         reset(index) {
           this.objects[index].content = '';
         }
     }
   });

https://jsfiddle.net/kherd8h2/1/

[kickthemooon]

Thank you very much for the example,

What I actually am trying to do is reset the whole array. That means if there 5 objects on the array, I want to remove them all and then add a default one again.

I was trying to achieve that with this.objects = [{content: ''}]; and that is where I am left with "naked" textareas.

[kickthemooon]

Finally I found out what it is thanks to your example. my v-for was like this:

<trumbowyg 
:config="tbwgConfig" 
v-for="textElement in textElements" 
v-model="textElement.content"
></trumbowyg>

and yours was wrapped inside a div so after I wrapped mine inside a div and moved the v-for inside the div the issue was gone.

Thanks.