这是我的观点
<div class="store-list" id="store-list">
<div class="store-list__store" v-for="store in stores">
<div class="store-list__store--info">
<h5 class="store-list__store--address">
{{store.address}}
</h5>
<div class="store-list__store--meta">
<i class="icon-location-store-small"></i>
<span class="store-list__store--type">
{{store.type}}
</span>
<span class="store-list__store--distance">
<i class="icon-location"></i>
{{store.distance}} km
</span>
</div>
</div>
<div class="store-list__store--picker store-list__store--stockstatus">
<p class="store-list__store-stockstatus store-list__store-stockstatus--instock" v-if="store.stock">
<i class="icon-check"></i>
I lager
</p>
<p class="store-list__store-stockstatus" v-else>
<i class="icon-remove"></i>
Ej i lager
</p>
<a class="store-list__store--pick-store js-go-store">Välj butik</a>
</div>
</div>
这是我的Vue实例,应该创建一个来自Ajax调用的存储列表。在第一次调用时,将创建列表,但是每当我搜索一组新存储时,阵列就会发生更改和更新。 console.log会显示每个调用的更改,但是呈现的视图保持不变。
const storeListVm = new Vue({
el: '#stock-status',
data() {
return {
stores: [],
openhoursToday: '',
showOnlyInStock: true
};
},
methods: {
fetchStoresWithStock: function() {
$.ajax({
url: dataUrl,
dataType: 'json',
}).done((data) => {
for(let i = 0; i < data.facilities.length; i++) {
this.stores.push(data.facilities[i]);
};
console.log(this.stores);
});
}
}
});
有人可以帮我弄清楚数组为什么更改但视图没有更改吗?我也尝试过Vue.set