时间戳

首页 > 解决方案 > 为 Vuetify 标签添加自定义属性

vue.js - 为 Vuetify 标签添加自定义属性

问题描述

如何将自定义属性添加到Vuetify标签。我想向我的网站添加一些Schema.org属性。

我有这样的模板：

<template>
    <v-container>
        <v-layout row wrap >
            <v-flex xs12>
                <h1 class="content-title display-1">{{ post.title }}</h1>
            </v-flex>
            <v-flex xs12>
                <div class="content-body" v-html="getMarkdown(post.text)"></div>
            </v-flex>
        </v-layout>
    </v-container>
</template>

标签： vue.jsvue-componentschema.orgvuetify.jsmicrodata

解决方案

Vuetify 通常会“传递”您的自定义属性，除非它们与 API 中的内容发生冲突。换句话说，这将起作用（从您的问题中不清楚您尝试了什么没有）：

<v-btn itemprop="thing" />

但是，更通用和更稳定的解决方案可能是将该标记添加到包装元素，或者创建自己的组件来包装 Vuetify 组件。或者使用<meta>标签（是的，它们在正文中是允许的）。

推荐阅读