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

【问题标题】：Vue js - Data from post request will not renderVue js - 来自发布请求的数据不会呈现
【发布时间】：2017-08-04 10:10:52
【问题描述】：

我有下一个 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;

下一个渲染数据的 html 'immobles'：

<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>

如您所见，我在 mount 函数中设置了数据“immobles”，我得到了这个：问题出现在页面加载时没有呈现任何内容，是因为数据'immobles'在填充发布请求时没有触发“onchange-renderhtml”吗？如果是这样，我怎样才能将这个“onchange-renderhtml”设置为数据“immobles”？

【问题讨论】：

你试过Vue.set吗？

标签： javascript jquery html vue.js vuejs2

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

请注意，现在我推动对象并在推动之前设置计数器。此外，数据“不动”现在是一个数组，而不是一个对象

【讨论】：