Skip to content

docs: add key for looped contents #294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 29, 2024
Merged

docs: add key for looped contents #294

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/docs/components/dropdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ And with `<a>` elements:
The best part is you can do this with any button variant, too:

::: demo
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
<CDropdownMenu>
Expand All @@ -77,7 +77,7 @@ The best part is you can do this with any button variant, too:
</template>
:::
```vue
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CDropdownToggle :color="item">{{togglerText}}</CDropdownToggle>
<CDropdownMenu>
Expand All @@ -96,7 +96,7 @@ Similarly, create split button dropdowns with virtually the same markup as singl
We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

::: demo
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CButton :color="item">{{ item }}</CButton>
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
Expand All @@ -109,7 +109,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</template>
:::
```vue
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CButton :color="item">{{ item }}</CButton>
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
Expand Down Expand Up @@ -724,4 +724,4 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:

!!!include(./api/dropdown/CDropdownMenu.api.md)!!!

!!!include(./api/dropdown/CDropdownToggle.api.md)!!!
!!!include(./api/dropdown/CDropdownToggle.api.md)!!!