gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:54:16 25 4
gpt4 key购买 nike

我有 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 完全是从头开始创建的,包含新对象。

我错过了什么?

最佳答案

听起来您对此处绑定(bind)的数据有误。您期望 data: {listings: gmarkers}vm.listingsgmarkers 数组之间进行绑定(bind)。这不是它的作用。它将 gmarkers 数据复制到列表中并且不再收听 gmarkers。参见 this fiddle例如,我认为你做错了什么。

我们可以通过在 ajax 请求后将 vm.listings 设置为新的对象数组来解决上述问题。

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

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

在 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);
});
}
}

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

关于ajax - 使用对象中的更改更新 DOM (vue.js) - 绑定(bind)不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30789466/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com