1

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 関数を実行できますか?

4

3 に答える 3

7

試す

getSubmissions: function(){
  var _this = this
  this.$http.get(dataUrl, function(submissions){
    this.$set('submissions', submissions);
    this.$nextTick(function(){/*here the DOM is ready*/})
  }
}
于 2016-08-26T15:42:50.103 に答える
0 
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

于 2016-08-26T17:23:24.490 に答える