时间戳

首页 > 解决方案 > 来自 WP REST API 的类别的 Vuejs vfor 循环中的 SVG

wordpress - 来自 WP REST API 的类别的 Vuejs vfor 循环中的 SVG

问题描述

我一直在尝试将 sprite.svg 文件中的 svg 添加到从 wordpress rest api 获取类别的循环中，但我正在努力寻找一种使用类别名称添加它们的方法，其中我声明了“INSERT-HERE” . 在 sprite.svg 中，它们对应于类别名称。这是我做的第一个项目之一，任何帮助都将不胜感激。

<template>
    <div class="w-full">
        <div class="container grid grid-cols-5 text-default pt-1">
            <div v-for="category in filteredCat" :key="category.id" @click="toCategoryPage(category.name, category.id)" class="group transition-all duration-200 ease-in-out hover:-mt-1 cursor-pointer px-4 py-2 mr-4">
                <router-link :to="{path: `/blog/${category.name}`}" active-class="active" class="flex items-center" exact>
                    <svg :class="`group-hover:fill-${category.id}`" class="w-1/5 h-12 pr-3 fill-default">
                        <use href="../assets/svg/sprite.svg#INSERT-HERE"></use>
                    </svg>
                    <h3 :class="`group-hover:text-${category.id}`" class="text-xl font-semibold">{{ category.name }}</h3>
                </router-link>
            </div>
        </div>
        <div class="shadow-md h-1"></div>
        <router-view></router-view>
    </div>
</template>

谢谢

标签： wordpressapi

解决方案

你可以试试这个：

<use :href=`../assets/svg/sprite.svg#${category.name}`></use>

或这个：

<use :href="'../assets/svg/sprite.svg#' + category.name + '"></use>

推荐阅读