vuetify.js 相关问题

我正在尝试为名为 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(); 这应该正确地传递道具

javascript vue.js vuejs3 vuetify.js vue-test-utils

回答 1 投票 0

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

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

vue.js vuejs2 vuetify.js stepper vuetify2

回答 1 投票 0

如何在单击时关闭带有前置项目的 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， }” 如上所述对我有用

vue.js vuetify.js

回答 3 投票 0

使用 Vuetify 选择多个日期

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

vue.js datepicker vuejs3 nuxt.js vuetify.js

回答 1 投票 0

vuetify.js 相关问题

最新问题