doesn't seem to work in a v-for list rendering

[didamaran]

while it's working for me in different components, it doesnt in a list rendered on the basis of an array by v-for.

[tthallos]

Did you mean this?

<div v-for="item in items">
  <textarea v-autosize="item">{{item}}</textarea>
</div>

[didamaran]

exactly

this is how i implemented the directive:

Vue.directive('autosize', {
bind: function() {
    autosize(this.el);
},

update: function(value) {
    this.el.value = value;
    autosize.update(this.el);
},

unbind: function() {
    autosize.destroy(this.el);
}
});

in a component it works like this:

<textarea v-autosize="nunote.text" v-model="nunote.text">{{nunote.text}}</textarea>

in the same component in a v-for-loop it fails:

<tr v-for="item in positionen">
    <td>
        <textarea v-autosize="item.note" v-model="item.note">{{item.note}}</textarea>
    </td>
</tr>

I ran into this with other plugins / functions too and it seems that its due to the fact, that those dom elements get inserted into the page dynamically (after the app has been started up).

in jquery you're able to address this with on(...). but how do you handle this in vue? i tried to modify the directive like this:

Vue.directive('autosize', {
  bind: function() {
    Vue.nextTick(function() {
      autosize(this.el);
    })
  },

update: function(value) {
  this.el.value = value;
  Vue.nextTick(function() {
    autosize(this.el);
  })
},

unbind: function() {
    autosize.destroy(this.el);
}
});

but it doesnt do the trick either

[tthallos]

I use same way to fix it, you can see my commit