Javascript 在Vue.js中调用AJAX后重新加载转盘

我的页面中有一个carousel组件，其中的数据通过对服务器的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;
        })
    }

}

起源
美国
{{product.name}
%{{产品销售额{u百分比}
{{产品.正常价格}
{{product.price}}
+
导出默认值{
名称：“主页”，
组件：{searchBar、topNav、siteFooter、carousel}，
数据（）{
返回{
幻灯片产品：[]，
原生动物：[]，
今日热点：[]，
}
},
已创建：函数（）{
设th=这个；
get（'myapirl'）。然后（（响应）=>{
th.originalGames=response.data[2]。项；
th.todayHots=response.data[2]。项目\u hot；
})
}
}

只需向carousel组件添加一个

键

属性，然后在每次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++;
        });
  }

...
导出默认值
{
数据（）
{
返回{
刷新：0，
...
};
},
创建（）
{
get（'myapirl'）。然后（（响应）=>{
this.originalGames=response.data[2]。项；
this.todayHots=response.data[2]。项目\u hot；
这个.刷新++；
});
}

只需向carousel组件添加一个

键

属性，然后在每次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++;
        });
  }

...
导出默认值
{
数据（）
{
返回{
刷新：0，
...
};
},
创建（）
{
get（'myapirl'）。然后（（响应）=>{
this.originalGames=response.data[2]。项；
this.todayHots=response.data[2]。项目\u hot；
这个.刷新++；
});
}