Vuetify.js是Vue.js的语义材料组件框架2.将此标记用于特定于vuetify组件和api的问题。 （如果可能，提供CodePen或JsFiddle重现您的问题）
我看过很多关于如何使用 v-date-picker 限制未来日期的帖子，但是如何使用具有日期类型的 v-text-field 做同样的事情呢？我不想添加 v-date-picker bc
在我们的组织中，我们开发了基于（单位、部门、部门）的官方信件的电子信件（电子书）系统。我们在打印信函时遇到问题： 内容的高度是可变的，并且可能...
如何在我现有的 Vue2 项目中清楚且单独地使用 vuetify 中的组件
我有一个项目，致力于 Laravel 和 Vue2。我想在项目的特定部分使用 Vue 插件 Vuetify 中的一些材质组件。首先，我在我的
Vuetify 数据表：item-class 不执行任何操作
我对 Vuetify（v. 2.3.4）数据表中的“:item-class”属性感到非常困惑。即使我尝试添加静态文本类，它也不会执行任何操作。 我对 Vuetify（v. 2.3.4）数据表中的“:item-class”属性感到非常困惑。即使我尝试添加静态文本类，它也不会执行任何操作。 <v-data-table class="mt-10" item-key="id" :headers="headers" :items="user_tender_assignment_table.user_tender_assignments" :loading="user_tender_assignment_table.loading" :loading-text="tables.loading_text" :search="user_tender_assignment_table.search" v-model="user_tender_assignment_table.selected" :footer-props="tables.footer_props" :item-class="'xxx'" </v-data-table> 它只是渲染 tr 标签，没有任何类： 你知道为什么吗？我认为它不久前就有效了，我没有更改 Vuetify (2) 版本。 您可以使用item-class，如下所示： <template>： <v-data-table :headers="headers" :items="items" :item-class="rowClass" ></v-data-table> <script>： methods: { rowClass(item) { console.log(item) const rowClass = 'myclass' return rowClass; } } <style>： <style lang="css"> .myclass { color: red; background-color: green; } </style> item-class不直接指定CSS类。如果它是一个字符串 - 那么它指定包含 CSS 类的项目对象内的属性。如果它是一个函数 - 那么它获取 item 作为其参数，并且必须返回 CSS 类。 在我的例子中，我为 item-class 选择字符串类型，然后您可以将任何 CSS 类名称作为 items 对象中的 prop 传递。简单来说就是这样： 模板： <v-data-table :headers="headers" :items="lineas" item-class="color" ... </v-data-table> 数据对象： data: () => ({ lineas: [ {text: 'Fecha',align: 'start',sortable: true,value: 'fecha', color: 'red-line'}, {text: 'Descripción',align: 'start',sortable: false,value: 'descripcion', color: 'blue-line'}, ], }) CSS： <style> .blue-line td { color: green; } .red-line td{ color: red; } </style> 为了使其正常工作，必须至少更新 Vuetify v2.3.8，因为最近包含此功能（2020 年 5 月）： https://github.com/vuetifyjs/vuetify/pull/11254 Vueitfy3 现在有一个 v-data-table cell-props 属性，可以由函数填充。 <v-data-table :headers="headers" :items="items" :cell-props="getCellProps" > 将项目视为具有价格值的对象数组，这样的测试函数 function getCellProps (data) { if (data.item.price > 25) { return { class: 'text-error' } } if (data.item.price< 10) { return { class: 'text-success' } } } 这会将 class="text.error" 或 "text-success" 添加到项目与条件匹配的行的每个单元格 (td)。 还有一个 row-props 属性，其工作方式完全相同，但将类添加到行 (tr) 而不是单元格。 来源： https://github.com/vuetifyjs/vuetify/pull/18589 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/VDataTable.tsx
如何从 Vuetify 3 的 v 表中的标题中删除或编辑“组”名称的宽度等
如何从 Vuetify 3 的 v 表中的标题中删除或编辑“组”名称的宽度等 来自文档的示例代码游乐场
从 vuetify 示例中，该图标显示在每行的右侧。 但是当我自己制作时，箭头出现在左侧，我还没弄清楚如何控制它的位置。 我的代码就像
我应该如何/何时在 Vuetify 3 中使用 v-layout？
我不明白何时/何地/为何在 Vuetify 3 中使用 v-layout 组件。 例如，我看到在应用程序栏组件的文档中，他们有一个使用 v-layout （GitHub 代码）的示例，b...
我有这个代码： 我有这个代码： <v-select v-model="select" :items="countries" item-title="name" item-value="last" item-text="name" variant="solo" > <template v-slot:selection="{ item }"> <Icon :icon="item.raw.code"/> {{ item.raw.name }} </template> </v-select> 这向我显示了这个结果 但我想要的最终结果是这个 我尝试添加此块代码 <template v-slot:item="{ item }"> <Icon :icon="item.raw.code"/> {{ item.raw.name }} </template> 但这打破了所有选择机制 感谢您的帮助 答案包含在文档中： 项目槽用于更改项目在列表中的呈现方式。它提供了 item，一个包含转换后的 item-title 和 item-value 的 InternalItem 对象； 和 props，一个包含通常绑定到列表项的道具和事件的对象。 您缺少维护每个项目的选择功能的 props 对象。将其添加到您的 v 槽并将其绑定到您的 Icon 元素。 <template v-slot:item="{ props, item }"> <Icon v-bind="props" :icon="item.raw.code"/> {{ item.raw.name }} </template>
无法绑定 v-on：单击 Vuetify [Vue warn]：v-on 处理程序中出现错误：“TypeError：handler.apply 不是函数”
我试图在动态生成的子标题 v-list-tile Vuetify https://vuetifyjs.com/en/components/subheaders 上绑定单击事件，但每次单击该选项时都会出现错误。 vue.js:63...
我希望在 v-dialog 上有一个观察者，以便在对话框打开时停止音频文件播放。通常我会有 v-model="dialogVisible" 然后添加一个手表。但因为我有多个
如何在没有构建/捆绑工具的情况下在 Chrome 扩展中使用 Vuetify？
我正在创建一个 Chrome 扩展程序，并希望使用 Vue.js 和 Vuetify 作为弹出 UI。 该扩展使用清单版本 3（因此，与 v2 相比，CSP 限制更严格）。 我不想使用任何
如何在 Vuetify 扩展面板中设置 Google 字体图标
我在扩展面板内设置 Google 图标时遇到一些困难。通常，您可以通过 组件内的折叠图标或展开图标属性来设置它们...
我正在将旧的 vue2 项目移植到 vue3，vuetify 也是如此。我的应用程序栏位于 App.vue 中。我有一些正在使用的视图，我正在使用多个组件。问题已附上...
我想使用 Vuetify (v1.0.18) 使用 v-tab 渲染一些静态导航。路由是在服务器端完成的，因此我需要一种通过属性设置活动选项卡的方法。这是一项非常基本的任务，b...
我正在尝试将 (+) 图标添加到 v-datatable 中的标题列之一。 下面的代码没有添加任何图标。实际上，为标头创建模板槽对数据表没有任何影响。 ...
将 Vuetify 添加到 Vue Web 组件后传递 props
我正在vue中开发一个Web组件。其中很多都是使用 vuetify 组件库制作的，我目前正在尝试导出到 Web 组件。我已按照描述的步骤操作...
将 vuetify 添加到 vue web 组件后无法传递 props
我正在使用 vue 开发 Web 组件。其中很多都是使用 vuetify 组件库制作的，我目前正在尝试导出到 Web 组件。我已经关注了...
我正在开发一个个人项目，我试图避免完整的 npm 构建过程，而是在使用 Vue 3 和 Vuetify 的单个 .html 文件中工作。这是完整的 HTML（基本上你可以...
我需要用户能够在 vuetify v-time-picker 组件中输入数字，而不会失去选择时钟时间的功能。 我需要用户能够在 vuetify v-time-picker 组件中输入数字，而不失去选择时钟时间的功能。 <v-col align-self="center"> <v-menu ref="menuTimeStart" v-model="menuTimeStart" :close-on-content-click="false" :nudge-right="40" :return-value.sync="startTime" transition="scale-transition" offset-y > <template v-slot:activator="{ on, attrs }"> <v-text-field dense v-model="startTime" label="Start time" prepend-icon="mdi-clock-time-four-outline" readonly :disabled="pickerDisabled" v-bind="attrs" hide-details="auto" :rules="rules" :error-messages="errorMessage" color="tertiary" v-on="on" class="mr-4 align-center" ></v-text-field> </template> <v-time-picker v-if="menuTimeStart" v-model="startTime" color="tertiary" no-title @click:minute="$refs.menuTimeStart.save(startTime)" ></v-time-picker> </v-menu> </v-col> 我尝试制作一个@input，以便我可以在字段中输入数字，但仍然无法实现该功能，谢谢。 在 v-text-field 上使用 v-model 和 @change 的组合，然后将结果提供给 v-time-picker。不要忘记在分配之前解析/清理值，因此最好不要使用相同的变量来保存更改。根据我的尝试，v-time-picker 默认使用 HH:MM 格式。 <v-text-field v-model="startTime" label="Start time" @change="onTextChange"> </v-text-field> <v-time-picker v-model="startTimeParsed"></v-time-picker> ... data() { return { startTime: "", startTimeParsed: "", } } ... methods: { onTextChange() { // validate this value before assigning, you can use regex and so on this.startTimeParsed = this.startTime } } 最小可重现示例：https://codepen.io/artikandri/pen/wvNEKNV?editors=101
我正在我的 Vue 应用程序中创建一个页面，从数据库中获取一些数据并使用 v-for 来渲染每个对象。但是，它不起作用。检查数据库响应时...