0

嗨开发者，

我将 splidejs 用于 vue 滑块组件。我不认为 splidejs 有问题。但是这里描述了一个问题。

问题

有一个滑块组件。我正在制作动态幻灯片。有两种方法。

情况1：

静止的 - 

<template>
    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
</template>

动态-- data () 选项中有一个数组。这里

<template>
    <div>
        <li v-for="(slide, index) in slides" :key="index">
           {{ slide.title }}
        </li>
    </div>
</template>

data () {
    return {
        slides: [
          {
            id: 1,
            title: "Best Handmade Goods",
          },
          {
            id: 2,
            title: "Best Cotton",
          },
       ],
   }
}

结果：完美运行

案例2

*我在这里使用api。API 响应是 100% 好的。axios没有问题。*

<template>
    <div>

        <li v-for="(slide, index) in slides" :key="index">
           {{ slide.title }}
        </li>

    </div>
</template>

data () {
    return {
        slides: null  or // same response on slides: []
    }
},

mounted() {this.fetchSlides()},

methods: {
    async fetchSlides() {
        try {
            const url = "https://fakestoreapi.com/products"
            const response = await axios.get(url)

            this.slides = response.data

            console.log(this.slides)

        } catch (error) {
            console.log(error)
          }
    }
}

屏幕截图中的 API 响应

api响应

案例 2 的结果：UI 中断。API 调用时滑块停止工作。

注意：

  1. 问题与 splidejs 无关
  2. 我正在使用 vue 3 cdn。
  3. 所有像 axios、splidejs 这样的插件都是全局导入的。他们没有问题
4

0 回答 0