Question

我有一个带有以下HTML的v-repeat块

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

    }

问题是我的flip（）行为在v-repeat块中没有工作，很可能是因为这些元素是动态创建的。如何将此行为绑定到具有.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使用异步批量更新时）。

如何绑定vuejs重复块中的新元素中的行为？

1 个答案: