admin 管理员组

文章数量: 1086019

Using vue-resource i am able to get data from my api and set it so i can use it in my html , my problem is i want to run a jquery function after v-for is plete so jquery could see elements in my dom , here is my code :

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>

I'm trying to run this function against my page :

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

It doesn't work , is there anyway so i can run this jquery function after v-for is plete ?

Using vue-resource i am able to get data from my api and set it so i can use it in my html , my problem is i want to run a jquery function after v-for is plete so jquery could see elements in my dom , here is my code :

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>

I'm trying to run this function against my page :

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

It doesn't work , is there anyway so i can run this jquery function after v-for is plete ?

  • javascript
  • vue.js
  • vue-resource
Share Improve this question asked Aug 26, 2016 at 14:44 SynxmaxSynxmax 2,2241 gold badge22 silver badges38 bronze badges 1
  • to whoever down votes , care to explain your reason !!! – Synxmax Commented Aug 27, 2016 at 8:01
Add a ment  | 

3 Answers 3

Reset to default 7

Try

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

actually v-for works with life-cycle hooks and it's not working with the first render of vue on DOM it goes with UPDATE DOM so if you put any function after UPDATED it will be called after V-for 

enter code here

methods:{
},

updated({
//your code
}

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();
  }
});

if this doesnt work you may want to call the .grid after a timeout function for

本文标签： javascriptRun a jQuery function after vfor is done in vueStack Overflow

版权声明：本文标题：javascript - Run a jQuery function after v-for is done in vue? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744080899a2530222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。