运行 vue 中完成v-for 后的jQuery 函数？

Question

使用 vue-resource 我可以从我的 api 获取数据并设置它以便我可以在我的 html 中使用它，我的问题是我想运行 v-for 完成后的 jquery 函数，因此 jquery 可以看到我的 dom 中的元素，这是我的代码：

js

dataUrl = "http://localhost:8081/hesabiha/userSubmissions";

var app = new Vue({
  el: "#campaign",
  methods: {
    getSubmissions: function(){
      this.$http.get(dataUrl, function(submissions){
        this.$set('submissions', submissions);
      });
    },
  },

  ready: function(){
    this.getSubmissions();
  }
});

html

<div v-for="item in submissions" class="grid-item">
    <img v-bind:src="item.field_image[0].url" alt="Hello">
</div>

我正在尝试运行此功能针对我的页面 :

$('.grid').masonry({
    // options...
    itemSelector: '.grid-item',
    columnWidth: 200
  });

它不起作用，无论如何我可以在 v-for 完成后运行这个 jquery 函数？

Answer 1

尝试

getSubmissions: function(){
  var _this = this
  this.$http.get(dataUrl, function(submissions){
    this.$set('submissions', submissions);
    this.$nextTick(function(){/*here the DOM is ready*/})
  }
}

Answer 2

dataUrl = "http://localhost:8081/hesabiha/userSubmissions";

var app = new Vue({
  el: "#campaign",
  methods: {
    getSubmissions: function(){
      this.$http.get(dataUrl, function(submissions){
        this.$set('submissions', submissions);

        $('.grid').masonry({
            // options...
            itemSelector: '.grid-item',
            columnWidth: 200
        });
      });
    },
  },
  ready: function(){
    this.getSubmissions();
  }
});

如果这不起作用，您可能需要在

的超时函数后调用 .grid

Answer 3

实际上 v-for 与生命周期挂钩一起工作，它不适用于 DOM 上的 vue 的第一个渲染，它与更新一起使用 DOM 所以如果你在更新后放置任何函数它会在 V-for

之后被调用

enter code here

methods:{
},

updated({
//your code
}

运行 vue 中完成v-for 后的jQuery 函数？

Run a jQuery function after v-for is done in vue?

javascript

vue.js

vue-resource