Как связать поведение в новых элементах в блоке повтора vuejs?

Question

У меня есть v-повтор блок со следующим HTML

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

и пытаюсь связать поведение флипа в flip jquery plugin.

Мой скрипт vue - это что-то вроде этого.

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' 
       } 
      } 
     ) 

    } 

Проблема заключается в том, что я поведение флипа() не работает внутри в клиноремённом повторе блока, скорее всего, потому, что эти элементы создаются динамически. Как связать это поведение со всеми будущими элементами с классом .flipblock?

p.s .: Поведение flip() работает просто отлично за пределами блока повтора vue.js.

Answer 1

Попробуйте использовать часы:

data: { 
    "onedaytours": null 
}, 
ready: function(){ 
    this.$watch("onedaytours", function (newValue, oldValue) { 
     this.$nextTick(function() { 
      $(".flipblock").flip(); 
     }); 
    }); 

    this.fetchOneDayTours(); 
}, 

Это предполагает, что .flip() является безопасным для вызова на элементах несколько раз. В противном случае вам нужно либо сделать что-то вроде отметки инициализированных элементов, чтобы вы могли пропустить их, удалить флип из всех элементов, а затем снова применить ко всем и т. Д.

Звонок $nextTick необходим, чтобы DOM для обновления (когда Vue использует асинхронные обновления пакетов).