在Gridsome中使Vueper-Slides与Markdown前端一起工作

问题描述

我已经为Vue JS安装了各种幻灯片/转盘，但是一直中断构建，直到遇到Vueper-Slides。

使用Gridsome的$page.post.slides查询Markdown中最重要的元数据，我的图像数组如下所示：

---
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>

在脚本块中，我有：

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

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

此刻，我得到了一个空白的轮播-控制台中的<img src>标签没有错误或[object object]。

有人知道我如何使Vueper-Slides与Gridsome一起工作吗？如果我不是很清楚，请提前道歉，因为我刚刚开始学习VueJS。 ：）

非常感谢！

解决方法

您使用v-for迭代了一个空的幻灯片数组slides: []，这将导致一个空的幻灯片放映（没有<vueper-slide>）。

因此，您应该将$page.post.slides放在v-for中，并在:image中给它slide.image。

以下是使用Gridsome和入门页面的工作演示： https://codesandbox.io/s/staging-water-ortxw?file=/src/pages/Index.vue