使用对象中的更改更新 DOM (vue.js) - 绑定不起作用？

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} 在 vm.listings 和 gmarkers 数组之间进行绑定。这不是它的作用。它将 gmarkers 数据复制到列表中并且不再收听 gmarkers。请参阅 this fiddle 以了解我认为您做错了什么的示例。

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

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

您可以在 this updated fiddle 中看到实际效果。

在 ajax returns 之前看到空白列表实际上是很常见的。这是一些示例代码，当 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);
    });
  }
}

This fiddle 显示了上面的代码，但请注意我使用的假 ajax 请求所需的差异。

使用对象中的更改更新 DOM (vue.js) - 绑定不起作用？

Updating the DOM with change in an object (vue.js) - binding not working?

ajax

dom

vue.js