javascript - Vue js - 来自发布请求的数据将不会呈现

Question

我有下一个 vue 实例:

 var immobles_destacats = ($('#immobles_destacats').length > 0) ? new Vue({
  el: '#immobles_destacats',
  data: {
    immobles: {}
  },
  methods: {
    add: function(i) {
      if (this.immobles[i].imatges.lenght == this.immobles[i].counter) {
        return this.immobles[i].counter = 0;
      }
      return this.immobles[i].counter++;
    },
    substract: function(i) {
      if (this.immobles[i].counter == 0) {
        return this.immobles[i].counter = this.immobles[i].imatges.lenght;
      }
      return this.immobles[i].counter--;
    }
  },
  mounted: function() {
    $.post('get_immobles_destacats', function(immobles, textStatus, xhr) {
      for (var i = 0; i < immobles.length; i++) {
        immobles_destacats.immobles[i] = immobles[i];
        immobles_destacats.immobles[i].counter = 0;
      }
    });
  }
}) : null;

以及下一个渲染数据“immobiles”的 html:

<div id="immobles_destacats">
    <div v-for="(immoble, key) in immobles" class="immoble"><img v-bind:src="immoble.imatges[immoble.counter].url"/>
      <input type="button" v-on:click="add(key)" value="+"/>
      <input type="button" v-on:click="substract(key)" value="-"/>
    </div>
  </div>

如您所见，我在已安装的函数中设置了数据“immobiles”，我得到了以下结果: 当页面加载时，问题就出现了，没有任何渲染，是否是因为数据“immobiles”在填充post请求时没有触发“onchange-renderhtml”？如果是这样，我如何将此“onchange-renderhtml”设置为数据“immobiles”？

Answer 1

我幸运地解决了这个问题，我仍然不知道为什么这不起作用，但重点是现在它起作用了，这是新的 Vue 实例:

var immobles_destacats = ($('#immobles_destacats').length > 0) ? new Vue({
  el: '#immobles_destacats',
  data: {
    immobles: []
  },
  methods: {
    add: function(i) {
      alert(this.immobles[i].imatges.lenght)
      alert(this.immobles[i].counter)
      if (this.immobles[i].imatges.lenght == this.immobles[i].counter) {
        return this.immobles[i].counter = 0;
      }
      return this.immobles[i].counter++;
    },
    substract: function(i) {
      alert(this.immobles[i].counter)
      if (this.immobles[i].counter == 0) {
        return this.immobles[i].counter = this.immobles[i].imatges.lenght;
      }
      return this.immobles[i].counter--;
    }
  },
  mounted: function() {
    $.post('get_immobles_destacats', function(immobles, textStatus, xhr) {
      for (var i = 0; i < immobles.length; i++) {
        immobles[i].counter = 0;
        immobles_destacats.immobles.push(immobles[i]);
      }
    });
  }
}) : null;

请注意，现在我插入了该对象，并在插入它之前设置了计数器。 此外，数据“immobiles”现在是一个数组，而不是一个对象