使 Vueper-Slides 与 Gridsome 中的 Markdown 前端工作一起使用答案

【问题标题】：Making Vueper-Slides work with Markdown front matter in Gridsome使 Vueper-Slides 与 Gridsome 中的 Markdown 前端工作一起使用
【发布时间】：2020-09-14 19:55:17
【问题描述】：

我已经为 Vue JS 安装了各种幻灯片/轮播，但一直破坏我的构建，直到遇到 Vueper-Slides。

使用Gridsome的$page.post.slides在我的Markdown中查询front-matter元数据，我的图像数组是这样的：

---
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。 :)

非常感谢！

【问题讨论】：

标签： javascript vue.js carousel slideshow gridsome

【解决方案1】：

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

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

这是一个使用 Gridsome 和起始页的工作演示： https://codesandbox.io/s/staging-water-ortxw?file=/src/pages/Index.vue

【讨论】：