Commit f87d7e90 authored by Filipa Lacerda's avatar Filipa Lacerda

Fix typos

parent b47cd969
...@@ -551,28 +551,34 @@ On those a default key should not be provided. ...@@ -551,28 +551,34 @@ On those a default key should not be provided.
#### `:key` #### `:key`
When using `v-for` you need to provide a *unique* `:key` attribute for each item. When using `v-for` you need to provide a *unique* `:key` attribute for each item.
1. If the elements of array being iterated have an unique `id` it is advised to use it: 1. If the elements of the array being iterated have an unique `id` it is advised to use it:
```html ```html
<div v-for="item in items" :key="item.id"> <div
v-for="item in items"
:key="item.id"
>
<!-- content --> <!-- content -->
</div> </div>
``` ```
1. When the elements being iterated don't have a unique id, you can use the array index as the `:key` attribute 1. When the elements being iterated don't have a unique id, you can use the array index as the `:key` attribute
```html ```html
<div v-for="(item, index) in items" :key="index"> <div
v-for="(item, index) in items"
:key="index"
>
<!-- content --> <!-- content -->
</div> </div>
``` ```
1. When using `v-for` with `template` the child items need a `:key` attribute, since Vue doesn't allow for the `:key` to be in the `template` element. 1. When using `v-for` with `template` the child item needs a `:key` attribute, since Vue doesn't allow for the `:key` to be in the `template` element.
```html ```html
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<span :key="index"></span> <span :key="index"></span>
</template> </template>
``` ```
1. When using `v-for` with `template` and there is more than one child element, they `:key` values must be unique. It's adivsed to `kebab-case` namespaces. 1. When using `v-for` with `template` and there is more than one child element, the `:key` values must be unique. It's advised to use `kebab-case` namespaces.
```html ```html
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<span :key="`span-${index}`"></span> <span :key="`span-${index}`"></span>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment