通过更改对象(vue.js)更新DOM - 绑定不起作用？

Question

我有app.js文件,其中gmarkers是一个对象数组:

var vm = new Vue({
    el: '#lili',
    data: {
        listings: gmarkers
    }
});

在我的HTML文件中:

<div id="lili" >
    <div
        v-repeat="gmarker : listings" 
        class="listing listing-list col-sm-12" 
        style="height:50px;line-height:50px;"  
        data-cat="@{{gmarker.mycategory}}" 
        data-id="@{{gmarker.id}}"
    >
        <span style="color:black;">
            <a target="_blank" href="@{{gmarker.listlink}}">
                @{{ gmarker.listname }}
            </a>
        </span>
        <span class="tag blue-back" style="margin-left:5px;">
            <a target="_blank" href="@{{gmarker.catlink}}">
                @{{gmarker.listcat}}
            </a>
        </span>
        <span style="margin-left:20px;color:#bbb;">
            @{{gmarker.distance}}km
        </span>
    </div>
</div>

加载页面时,DOM正确加载,显示我正在寻找的列表,但是当(在js中的ajax调用之后)gmarkers对象发生更改时,DOM不会更改.

新的gmarkers完全是从头开始创建并包含新对象.

我错过了什么？

Answer 1

听起来你在这里绑定的数据是错误的.您期望在数组和数组data: {listings: gmarkers}之间进行绑定.这不是它的作用.它将gmarkers数据复制到列表中,不再听gmarkers了.看看这个小提琴,看看我认为你做错了什么.vm.listingsgmarkers

我们可以通过在ajax请求之后将vm.listings设置为新的对象数组来修复上述小提琴.

vm.$set('listings', gmarkers);

你可以在这个更新的小提琴中看到这个.

在ajax返回之前看到空白列表实际上很常见.下面是一些示例代码,它将在vue准备就绪时调用ajax请求,并在完成后更新列表.注意:此示例使用vue-resources来执行ajax请求.你可能没有这个.你总是可以使用jQuery或javascript来执行此操作.

data: {
    listings: []
},
ready: function () {
  this.fetchListings();
},
methods: {
  fetchListings: function () {
    this.$http.get('/your/api/listings', function (response) {
      this.$set('listings', response);
    });
  }
}

这个小提琴显示了上面的代码,但要注意我使用的假ajax请求所需的差异.