在 AJAX 调用 Vue.js 后重新加载轮播
Reload carousel after AJAX call in Vue.js
我的页面中有一个轮播组件,其中的数据是通过 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++;
});
}
我的页面中有一个轮播组件,其中的数据是通过 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++;
});
}