vuetify.js 相关问题

在使用 Vuetify 组件的 Vue3 测试中传递组件 props 的正确方法是什么？

我正在尝试为名为 CompanyBioPanel 的组件编写基本单元测试。这是该组件的简化版本： // 模板 我正在尝试为名为 CompanyBioPanel 的组件编写基本单元测试。这是该组件的简化版本： // template <v-card-text> <v-tabs v-model="companyTabs"> <v-tab value="generalData"> <h2>Details</h2> </v-tab> <v-tab value="companyConfiguration"> <h2>Company Configuration</h2> </v-tab> </v-tabs> <v-divider /> <v-window v-if="companyData.company_id != null" v-model="companyTabs" > <v-window-item value="generalData"> <v-list> <company-data-item v-for="item in generalData" :key="item.label" :label="item.label" :value="item.value" /> </v-list> </v-window-item> <v-window-item value="companyConfiguration"> <v-list> <company-data-item v-for="item in companyConfiguration" :key="item.label" :label="item.label" :value="item.value" /> </v-list> </v-window-item> </v-window> </v-card-text> // script import type { Company } from './types' import { computed, toRefs, ref, type ComputedRef } from 'vue' import CompanyDataItem from './CompanyDataItem.vue' const props = defineProps<{ companyData: { [key: string]: string } }>() const companyTabs = ref(null) const { companyData } = toRefs(props) const companyIdOrNull = computed(() => { return companyData.value?.company_id ?? null }) const generalData: ComputedRef<CompanyDataItemProps[]> = computed(() => { if (companyData.value == null) { return [] } return [ { label: 'Name', value: companyData.value.name, fieldName: 'name', isEditable: true } ] }) 在我的测试中，我想断言，当我将 companyData 对象作为道具传递给我的组件时，它会渲染 company-data-item 组件。 这是我的测试： import { mount } from '@vue/test-utils' import { h } from 'vue' import { VApp } from 'vuetify/components' import CompanyBioPanel from './CompanyBioPanel.vue' it('renders the company bio panel', async () => { const companyData = { company_id: 'abc', name: 'Test Company' } const wrapper = mount(VApp, { slots: { default: h(CompanyBioPanel, { props: { companyData } }) } }) expect(wrapper.exists()).toBe(true) const html = wrapper.html() expect(html).toContain('Test Company') const companyName = wrapper.find('h1') expect(companyName.text()).toBe('Test Company') const companyDataItems = wrapper.findAllComponents({ name: 'company-data-item' }) expect(companyDataItems.length).toBe(1) }) 这是一个简单的测试，断言子组件是根据作为 props 传递的数据生成的。但是，当我尝试运行测试时，出现以下错误： ⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ FAIL src/components/company-view/company-bio-panel/CompanyBioPanel.test.ts > renders the company bio panel TypeError: Cannot read properties of undefined (reading 'company_id') ❯ src/components/company-view/company-bio-panel/CompanyBioPanel.vue:45:27 43| <v-divider /> 44| <v-window 45| v-if="companyData.company_id != null" | ^ 46| v-model="companyTabs" 47| > 这对我来说没有意义，因为我在测试中通过了道具，所以companyData怎么可能是undefined？ 我还尝试将传递道具的方式修改为如下： const wrapper = mount(VApp, { slots: { default: h(CompanyBioPanel, { companyData }) } }) 但这会导致一个更奇怪的错误： ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Vitest caught 1 unhandled error during the test run. This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected. ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ TypeError: Cannot create property '_destroyed' on number '-1' ❯ clearImmediate node:timers:325:24 ❯ GlobalWindow.cancelAnimationFrame ../../node_modules/happy-dom/src/window/Window.ts:921:10 ❯ node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.mjs:104:9 ❯ callWithErrorHandling ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18 ❯ callWithAsyncErrorHandling ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:164:17 ❯ job ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1831:9 ❯ flushPreFlushCbs ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:308:7 ❯ updateComponentPreRender ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5876:5 ❯ ReactiveEffect.componentUpdateFn [as fn] ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5794:11 ❯ ReactiveEffect.run ../../node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19 您可以创建一个 Vuetify 实例： const vuetify = createVuetify() 并使用 mount 和 global.plugins 来正确集成 Vuetify； const wrapper = mount(VApp, { global: { plugins: [vuetify], }, slots: { default: () => h(CompanyBioPanel, { companyData }) // Correctly passing props } }) 然后，如果您等待下一次 DOM 更新，这将确保在做出断言之前已处理所有异步更新。 : await wrapper.vm.$nextTick(); 这应该正确地传递道具

带验证功能的可编辑 vuetify 步进器

有没有办法制作一个可编辑的 Vuetify 步进器，我可以在其中进行验证，以防止在验证不正确时单击另一个步骤的事件？ 我尝试修改默认...

如何在单击时关闭带有前置项目的 v-select 菜单

在我的 v-select 菜单中，我添加了一个包含 2 个 v-list-items 的模板： 在我的 v-select 菜单中，我添加了一个 template 和 2 v-list-items : <v-select :items=clients dense item-text="full_name" item-value="id" label="Search by client" outlined v-model="clientSearch" > <template v-slot:prepend-item> <v-list-item ripple @click="selectNone()"> <v-list-item-content> <v-list-item-title>None</v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item ripple @click="selectAll"> <v-list-item-content> <v-list-item-title>All</v-list-item-title> </v-list-item-content> </v-list-item> </template> </v-select> v-select 值中的项目会与默认设置的单击关闭属性发生反应，但其他 2 个 v-list-item 不会发生反应。 如何将属性 close-on-click 添加到 template 内的项目中，以便无论选择哪个项目，v 菜单都会关闭？ <v-select . . :menu-props="{ closeOnClick: true, closeOnContentClick: true, }" > </vselect> “closeOnContentClick: true”按照您的意愿创建列表:) 到目前为止，我还没有看到 vuetify 在他们的文档中包含此内容。我上次所做的只是在当前数据中推送一个新项目，并为指标分配一个 id。也许不是好方法，但目前可以解决您的问题。喜欢这个 this.clients.push( {id:0, full_name:'All'}, {id: -1, full_name:'None'} ) 添加 ：菜单道具=“{ 点击关闭：true， 关闭内容点击：true， }” 如上所述对我有用

使用 Vuetify 选择多个日期

常量日期 = ref(新日期(2024, 1, 19)) 我正在使用 Vue....

Vue.js：如何将数组转换为对象？

在 Vue.js 中：如何将数组转换为对象？我只想从数组中获取名称值“Willy”。 来自 LocalStorage 的数组数据： [{“id”：“56b5”，“姓名”...

Vuetify 预设 Essentials 找不到模块“虚拟：生成的布局”

我正在使用 Vue3 启动一个 vuetify 项目并想要构建它。 Npm run dev 工作正常，但 npm run build 因以下错误而失败： 错误信息 先谢谢您的帮助。 我发现了一些

我可以更改 Vuetify 的轮廓文本字段标签位置和行间隔吗？

我正在使用 Vuetify 尝试接近这种文本字段样式。我使用轮廓文本字段为他们提供了简单的自定义样式，但我无法更改其标签位置。有什么办法可以让我...

如何更改v-stepper的步骤图标大小？

我正在尝试更改步骤图标大小（在 v 步进器内）。 我正在尝试更改 尺寸（在 V 型步进器内）。 <v-stepper v-model="currentStep"> <v-stepper-header> <v-stepper-item :color="orangeColor" title="Step 1" value="1" id="firstStep"></v-stepper-item> <v-divider></v-divider> <v-stepper-item :color="orangeColor" title="Step 2" value="2" id="secondStep"></v-stepper-item> <v-divider></v-divider> <v-stepper-item :color="orangeColor" title="Step 3" value="3" id="thirdStep"></v-stepper-item> </v-stepper-header> </v-stepper> 使用Vuetify 3.5.3版本，我没有发现任何一种方法有效。我尝试使用 CSS，在网上找到了多种方法，但适用于旧版本的 Vuetify。 有人有解决办法吗？预先感谢！ width、height 和 font-size 元素的 .v-stepper-item__avatar 似乎会影响相关图标。 对于范围样式，请使用 :deep() 选择器： <style scoped> .v-stepper :deep(.v-stepper-item__avatar) { width: 40px !important; height: 40px !important; font-size: 1rem !important; } </style> 演示

Vuetify 表在加载数据时出现错误

以下代码给出错误“在渲染期间访问了属性“item”，但未在实例上定义”。但是当我将其更改为正常时，一切正常。 以下代码给出错误“在渲染期间访问了属性“item”，但未在实例上定义”。但是当我将其更改为正常时，一切正常。 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" /> </head> <body> <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script> <div id="app"> <v-table> <tbody> <tr v-for="item in routes"> <td>{{item.customerName}}</td> </tr> </tbody> </v-table> </div> <script> const { createApp, ref } = Vue; const { createVuetify } = Vuetify const vuetify = createVuetify() const app = createApp({ data: () => ({ routes: [{"id":1,"customerName":"Pietje puk", "orderNumber":"PF-123456789", "zipcode":"5388AA,18"}, {"id":2,"customerName":"van de Graaf", "orderNumber":"TEST", "zipcode":"1234AA"}] }), setup() { const date = ref(); } }); app.use(vuetify).mount('#app') </script> </body> </html> 我几乎尝试了一切，但似乎没有任何效果。也尝试了不同的版本。看起来这个组件有问题，但我是 Vuetify 的新手，所以也许我的代码中还有其他问题？我们的人工智能朋友无法帮助我;) 您正在使用 Vuetify 版本 2 中的 v-table，但您正在导入版本 3。 <v-table> <template #default> <tbody> <tr v-for="item in routes" :key="item.id" > <td>{{ item.customerName }}</td> <td>{{ item.orderNumber }}</td> <td>{{ item.zipcode }}</td> </tr> </tbody> </template> </v-table> 原因是 Vue 3 使用了与 Vue 2 不同的模板语法，并且一些功能在简单的 HTML 文件中不支持。 使用 Webpack 或 Rollup 等打包工具将代码转换为兼容的格式。 在线示例 2.就像@Sambal说的，你可以添加一个来实现它。 <v-table> <template #default> <tbody> <tr v-for="item in routes" :key="item.id" > <td>{{ item.customerName }}</td> <td>{{ item.orderNumber }}</td> <td>{{ item.zipcode }}</td> </tr> </tbody> </template> </v-table>

如何默认对 v-data-table 进行排序？

我似乎无法让默认排序工作。我在文档中看到的参数 custom-sort 是一个“用于对项目进行排序的函数”，但我不知道以什么方式。我可以想象...

vuetify 3 v-自动完成选择焦点上的所有文本

当用户点击或选择 v-autocomplete vuetify 3 组件时，我尝试选择该组件上的所有文本，以便他们可以立即开始编辑值，但我在执行时遇到问题...

将 vuetify 添加到 vite 项目时出现错误

我创建了一个 vite 项目，创建了一个导航组件，创建了一个路由器，然后通过运行 npm i vuetify 将 vuetify 添加到项目中。我现在收到以下错误： 未捕获的错误：[Vuetify] Co...

Apexcharts，连接系列线

我在尝试在 apexcharts 中连接 2 个系列线时遇到问题。 { 名称：“趋势1” 趋势： [ { 时间: '2024-02-15 00:00', 值：'99.6'， }, { 时间: '2024-02-15 01:0...

自定义确认组件未在 vue.js 中的 v-menu 内打开

每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。 应用程序.vue 每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。 应用程序.vue <template> {{isConfirmDialogVisible}} <div class="header"> <div class="left-menus"> <div v-for="(item, index) in items" :key="index" class="menu" style="background-color: red; gap: 10px; padding: 10px" @click="opendialog()" > {{ item.title }} </div> </div> <v-menu open-on-hover transition="slide-y-transition"> <template #activator="{ props }"> <div style="cursor: pointer"> <v-icon v-bind="props">mdi-menu-down</v-icon> </div> </template> <v-list> <v-list-item v-for="(item, index) in userOptions" :key="index" class="dropdown" @click="opendialog()" > <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item> </v-list> </v-menu> <Confirmation v-model="isConfirmDialogVisible" v-if="isConfirmDialogVisible" action-button="submit" action-button-left="cancle" action-button-right="confirm" > <div style="font-size: 20px">Are you sure？</div> </Confirmation> </div> </template> <script> import { ref } from 'vue' import Confirmation from './Confirmation.vue' const isConfirmDialogVisible = ref(false) const userOptions = ref([{ title: 'Logout' }, { title: 'Setting' }]) const opendialog = () => { isConfirmDialogVisible.value = true } export default { components: { Confirmation, }, data: () => ({ items: [ { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }, ], opendialog, isConfirmDialogVisible, userOptions, }), } </script> <style> .header .left-menus { display: flex; align-items: center; gap: 16px; } </style> 确认.vue <template> <v-dialog v-model="dialogVisible" persistent activator="parent" width="auto"> <div class="dialog_container"> <v-card> <div class="card-components"> <div class="warning_image"></div> <v-card-text> <slot></slot> </v-card-text> <v-card-actions> <v-btn class="back" @click="closeDialog" >{{ actionButtonLeft }}</v-btn > <v-btn @click="confirmSelection" class="confirm-submit"> {{ actionButtonRight}} </v-btn> </v-card-actions> </div> </v-card> </div> </v-dialog> </template> <script> import { ref } from 'vue' export default { props: { modelValue: Boolean, actionButton: { type: String, required: true, }, actionButtonRight: { type: String, required: true, }, actionButtonLeft: { type: String, required: false, default: 'cancel', }, }, emits: ['update:modelValue', 'confirmAction'], setup(props, { emit }) { const dialogVisible = ref(false) const closeDialog = () => { dialogVisible.value = false emit('update:modelValue', false) } const confirmSelection = () => { closeDialog() emit('confirmAction') } const returnBack = () => { closeDialog() } const handleOutsideClick = event => { console.log(event) } return { dialogVisible, closeDialog, returnBack, confirmSelection, handleOutsideClick, } }, } </script> <style scoped> .card-components { display: flex; flex-direction: column; gap: 24px; } .dialog_container { height: 225px; width: 648px; } .v-card { padding: 16px 24px 24px 24px; } .v-card-text { padding: 0; } .warning_image { display: flex; width: 100%; justify-content: center; } .v-card-actions { min-height: 0; padding: 0; display: flex; justify-content: flex-end; } .v-card-actions .v-btn { border: 1px solid #9ca3af; color: #9ca3af; width: 140px; justify-content: center; align-items: center; border-radius: 4px; } .v-card-actions .confirm-submit { color: white; border: 1px solid #41a1e0; background: #41a1e0; } </style> 每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。 在Confirmation.vue中，VDialog依赖父组件变得可见： <template> <v-dialog v-model="dialogVisible" activator="parent"> ... </template> <script setup> const dialogVisible = ref(false) ... </script> 因此，当确认组件变得可见时，VDialog 将显示对话框并更新dialogVisible。 由于某种原因，当 VMenu 可见时这不起作用。相反，使用组件的 modelValue 来触发对话框，无论如何这更有意义。有几种方法可以做到这一点，一种是在观察者中设置 dialogVisible： setup(props, { emit }) { const dialogVisible = ref(false) watchEffect(() => dialogVisible.value = props.modelValue) 这是在游乐场

如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？

如何在具有多个选项和项目槽的 Vuetify 自动完成菜单中显示复选框？ 我使用项目槽的原因是我想在项目上添加工具提示，但此后删除了复选框 &l...

如何删除vuetify中列表项的填充

在使用vuetify编写Vue项目时，我发现标签中有无用的填充，具体来说，是关于标签的。 图片：https://segmentfault.com/img/bVbtemC?w=890&h=

如何显示 v-select (Vuetify) 下拉列表中项目标题的 :items 对象数组中数据成员的修改文本？

我是 Vue 新手，目前正在与 Vuetify 合作构建下拉菜单“v-select”。 如果有办法那就太好了！否则，我正在考虑创建新的数组和隐藏数据......

在 Vuetify 中，当在其中的 AppDateTimePicker 中选择日期时，VMenu 会关闭

我正在使用 Vue 主题 Vuexy（Vue 和 Vuetify），并且我遇到了 VMenu 的问题，因为它有一个 AppDateTimePicker（Vuetify 的 DatePicker），并且在选择日期时，它正在关闭...

Vue js Swiper Element - 更新幻灯片数量时出现故障

我目前正在开发一个项目，需要使用滑动器来显示相当大量的幻灯片（150+）。我选择了这个工具：https://swiperjs.com/element 该接口可用于...

Vuetify - 项目文本项目值根本不起作用

我正在尝试使用返回对象指令。 我有一个对象列表： [{"id":1,"profile_name":"鞋店","数量":55,"price_multiplier"...