Javascript 使Vueper幻灯片与Gridsome中的降价正面内容配合使用

我已经为Vue JS安装了各种幻灯片/旋转木马，但一直在破坏我的构建，直到我发现

使用的

$page.post.slides

在我的标记中查询前台元数据，我的图像数组如下所示：

---
title: My title
path: /my-title
date: 2020-09-12
summary: Lorem ipsum dolor sit amet
tags: ["tags", "tags"]
slides:
  - { image: "./images/image1.jpg" }
  - { image: "./images/image2.jpg" }
  - { image: "./images/image3.jpg" }
---

在

CarouselComponent.vue

中，我有：

    <vueper-slides>
        <vueper-slide
            v-for="(slide, i) in slides"
            :key="i"
            :image="$page.post.slides"
        />
    </vueper-slides>

目前，我得到的是一个空白的旋转木马-在我的控制台中，

标记没有错误或[object]

有人知道如何让Vueper幻灯片与Gridsome配合使用吗？如果我没有说清楚，请提前道歉，因为我刚刚开始学习VueJS。：）

---

非常感谢

您有一个空幻灯片数组

slides:[]

，您正在使用v-for进行迭代，这将导致一个空幻灯片（无

）

因此，您应该将

$page.post.slides

放在v-for中，并在

:image

中给出

slide.image

下面是一个使用Gridsome和入门页面的工作演示：

import { VueperSlides, VueperSlide } from "vueperslides"
import "vueperslides/dist/vueperslides.css"

export default {
    name: "CarouselComponent",
    components: { VueperSlides, VueperSlide },
    data: () => ({
        slides: [],
    }),
}