在 vue 中完成 v-for 后运行 jQuery 函数？答案

【问题标题】：Run a jQuery function after v-for is done in vue?在 vue 中完成 v-for 后运行 jQuery 函数？
【发布时间】：2017-01-03 06:50:21
【问题描述】：

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

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 函数？

【问题讨论】：

投反对票的人，请解释你的理由！！！

标签： javascript vue.js vue-resource

【解决方案1】：

试试

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

【讨论】：

什么时候应该调用我的 jquery 函数？我的方法没有问题，我的问题是当 v-for 完成将数据放入 html 时，我需要调用 jquery 函数！
编辑看我的回答
这样不行，因为 vue 在提交设置后立即开始渲染视图，没有下一个滴答它是异步的
工作在这里，vue会在运行jquery之前完成v-for
为我使用 Vue 2，

【解决方案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

【讨论】：

不，我不能使用超时，伙计，我不知道这个社区最近有什么问题，每个人都跑来跑去投票
在 html 中确保您创建的 vue 脚本是在 jquery 之后导入的，之后无论是 gurghet 提到的 nextTick 还是 setTimeout 都可以工作，我之前遇到过这种情况，只是我不得不这样做使用包装。

【解决方案3】：

实际上 v-for 适用于生命周期钩子，它不适用于 vue 在 DOM 上的第一次渲染，它与 UPDATE DOM 一起使用，所以如果你在 UPDATED 之后放置任何函数它将在 V-for 之后调用

enter code here

methods:{
},

updated({
//your code
}

【讨论】：