jquery - How to bind behaviour in new elements in a vuejs repeat block? -

i have v-repeat block following html

<div v-repeat="tour:tours.data">              <div class="flipblock">                  <div class="front">front</div>                  <div class="back">back</div>              </div>         </div> 

and trying bind flip behaviour of flip jquery plugin.

my vue script this.

new vue({ el: '#tab-content',  ready: function(){     this.fetchonedaytours();     $(".flipblock").flip(); },  methods:{     fetchonedaytours:function(){         this.$http.get('http://xxxx',null,             function(tours){                 this.$set('onedaytours',tours);             }             , {                 headers: {                     'x-authorization':'76361d78ff3712ecf95f0989580a063e6ef3c211'                 }             }         )      } 

problem flip() behaviour not working inside in v-repeat block, because elements dynamically created. how can bind behaviour future elements class of .flipblock ?

p.s.: flip() behaviour works fine outside vue.js repeat block.

try using watch:

data: {     "onedaytours": null }, ready: function(){     this.$watch("onedaytours", function (newvalue, oldvalue) {         this.$nexttick(function () {             $(".flipblock").flip();         });     });      this.fetchonedaytours(); }, 

this assumes .flip() safe call on elements multiple times. otherwise, you'll either need mark elements have been initialized can skip them, remove flip elements , apply again, etc.

the $nexttick call needed allow dom update (when vue using async batch updates).