diff --git a/packages/api-generator/src/locale/en/VTabs.json b/packages/api-generator/src/locale/en/VTabs.json index 8eefdaf55c6..e44e73503a4 100644 --- a/packages/api-generator/src/locale/en/VTabs.json +++ b/packages/api-generator/src/locale/en/VTabs.json @@ -13,7 +13,7 @@ "height": "Sets the height of the tabs bar.", "hideSlider": "Hide's the generated `v-tabs-slider`.", "iconsAndText": "Will stack icon and text vertically.", - "items": "The items to display in the component. This can be an array of strings or objects with a property `title`.", + "items": "The items to display in the component. This can be an array of strings or objects with a property `text`.", "light": "Applies the light theme variant to the component.", "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.", "optional": "Does not require an active item. Useful when using `v-tab` as a `router-link`.", diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx index 31ddf16dc35..c68aa6456a6 100644 --- a/packages/vuetify/src/components/VTabs/VTabs.tsx +++ b/packages/vuetify/src/components/VTabs/VTabs.tsx @@ -144,7 +144,7 @@ export const VTabs = genericComponent()({ key={ item.text } value={ item.value } v-slots={{ - default: () => slots[`tab.${item.value}`]?.({ item }), + default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined, }} /> ) diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx index 20c48496c74..9cdb3f270dd 100644 --- a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx +++ b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx @@ -145,4 +145,17 @@ describe('VTabs', () => { expect(model.value).to.equal('B') }) }) + + it('should render tabs using items', () => { + const items = [ + { text: 'A', value: 1 }, + { text: 'B', value: 2 }, + { text: 'C', value: 3 }, + ] + cy.mount(() => ( + + )).get('.v-tab').eq(0).should('have.text', 'A') + .get('.v-tab').eq(1).should('have.text', 'B') + .get('.v-tab').eq(2).should('have.text', 'C') + }) })