我的页面中有一个轮播组件,通过AJAX调用将数据加载到服务器中。这部分还可以,但是当轮播项目附加到轮播时,它会被击毁。因此,在AJAX成功后,我需要重新渲染轮播。有人知道吗?我进行了很多搜索,但找不到vue.js的任何内容。
我的代码:
<carousel class="original-carousel" :dots="false" :nav="false">
<router-link class="product-item" to="/product" v-for="product in originalGames">
<div class="image-holder">
<img v-bind:src="product.thumbnail_url" v-bind:alt="product.name">
<div class="product-info">
<div class="product-platform">
origin
<img src="/src/assets/imgs/platform/origin-color.svg" >
</div>
<div class="product-region">
US
</div>
</div>
</div>
<h2 class="product-title">{{product.name}}</h2>
<div class="product-bottom">
<div class="product-card-price">
<div class="original-price__holder" >
<span class="sale-range" v-if="product.sale_percent !== false">%{{product.sale_percent}}</span>
<span class="original-price" v-if="product.sale_percent !== false"> {{product.regular_price}}</span>
</div>
<span class="sale-price">{{product.price}}</span>
</div>
<button class="add-to-cart btn btn--circle btn--transparent">+</button>
</div>
</router-link>
</carousel>
export default {
name: "homePage",
components: {searchBar, topNav, siteFooter, carousel},
data(){
return {
sliderProducts: [],
originalGames: [],
todayHots: [],
}
},
created: function () {
let th = this;
axios.get('myAPIUrl').then((response) => {
th.originalGames = response.data[2].items;
th.todayHots = response.data[2].items_hot;
})
}
}
只需在轮播组件中添加key
属性,然后在每次AJAX调用后更改其值-这将使Vue重新呈现该组件:
<carousel :key="refresh" ...>
...
</carousel>
<script>
export default
{
data()
{
return {
refresh: 0,
...
};
},
created()
{
axios.get('myAPIUrl').then((response) => {
this.originalGames = response.data[2].items;
this.todayHots = response.data[2].items_hot;
this.refresh++;
});
}