我有一个使用Vuetify数据表的简单数据表。其中一列是createdOn
(日期时间),我想对其进行格式化。我该怎么做 ?
这就是我现在得到的:
<template>
<v-layout>
<v-data-table :headers="headers" :items="logs">
</v-data-table>
<v-layout>
</template>
<script>
headers: [
{ text: "Time", value: "createdOn", dataType: "Date" },
{ text: "Event Source", value: "eventSourceName" },
{ text: "Event Details", value: "eventDetails" },
{ text: "User", value: "user" }
],
items: [],
</script>
Run Code Online (Sandbox Code Playgroud) amazon-web-services amazon-cloudfront terraform terraform-provider-aws
我正在尝试向表单添加自定义验证以测试重复条目。我怎样才能仅使用 vuetify 验证来做到这一点。如果用户输入重复,我想显示内联错误消息。
我有一个像这个例子中的 v-data-table https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side 服务器端分页和排序。我有几个下拉列表,它们用作填充相同数据表的相同 API 的过滤器。我的问题是当我更改过滤器时,记录范围会得到错误的值。有没有办法重置所有页脚组件。我检查了我找不到方法的文档。
我的项目中有一个 vuetify v-treeview 启用了可激活。假设用户已经选择了树项目之一。稍后,他/她单击已选择的树项。问题是它没有被选中。有没有办法防止这种情况?
<template>
<v-treeview
shaped
hoverable
activatable
:items="items"
></v-treeview>
</template>
<script>
export default {
data: () => ({
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app' },
{ id: 3, name: 'Chrome : app' },
{ id: 4, name: 'Webstorm : app' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [ …
Run Code Online (Sandbox Code Playgroud) 我正在尝试从 vuetify 预选择项目item-group
。它适用于字符串,但不适用于对象。在 vuetify 文档中,他们使用字符串数组作为项目组的项目列表。效果很好。
如果我尝试使用对象数组作为项目列表,它不起作用
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="500">
<v-list shaped>
<v-list-item-group v-model="model" multiple>
<template v-for="(item, i) in items">
<v-divider
v-if="!item"
:key="`divider-${i}`"
></v-divider>
<v-list-item
v-else
:key="`item-${i}`"
:value="item"
active-class="deep-purple--text text--accent-4"
>
<template v-slot:default="{ active, toggle }">
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-checkbox
:input-value="active"
:true-value="item"
color="deep-purple accent-4"
@click="toggle"
></v-checkbox>
</v-list-item-action>
</template>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{ name: "Connect"}
],
model: …
Run Code Online (Sandbox Code Playgroud)