# Как переиспользовать элементы в Vue.js с помощью key?

**URL:** <https://forum.itvdn.com/t/kak-pereispolzovat-elementy-v-vue-js-s-pomoshhyu-key/2826>\
**Category:** Vue.js\
**Created:** [19.11.2018 19:56:59 UTC](https://forum.itvdn.com/t/kak-pereispolzovat-elementy-v-vue-js-s-pomoshhyu-key/2826 "2018-11-19T19:56:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![logvinecd](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/l/cc9497/32.png) [@logvinecd](https://forum.itvdn.com/u/logvinecd)\
**Post date:** [19.11.2018 19:56:59 UTC](https://forum.itvdn.com/t/kak-pereispolzovat-elementy-v-vue-js-s-pomoshhyu-key/2826/1 "2018-11-19T19:56:59Z")

</div>

Всем доброго времени суток, читал что есть такая штука как key, и что с помощью неё можно переиспользовать элементы страницы, но немного не понял, в каком это плане можно переиспользовать, если и так можно по сути реюзать любую часть, был бы благодарен если бы кто то объяснил или показал на примере)

---

<div class="post-metadata">

**Author:** ![Nikit\_OS69](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/n/eb9ed0/32.png) [@Nikit\_OS69](https://forum.itvdn.com/u/Nikit_OS69)\
**Post date:** [19.11.2018 20:15:43 UTC](https://forum.itvdn.com/t/kak-pereispolzovat-elementy-v-vue-js-s-pomoshhyu-key/2826/2 "2018-11-19T20:15:43Z")

</div>

Да, есть такая штука, оч полезная кстати, с помощью атрибута key можно сказать что это значение будет уникальным и не зависеть ни от каких других полей, вот хороший пример, частично из документации vue.js:

```
**var** Vue = **new** Vue({  
 el:"#comp-container",  
 data: {  
 loginType:'username',  
 },  
 methods:{  
 changeLogType() {  
 **if** ( **this**.loginType==='username')  
 **this**.loginType="something else"  
 **else  
 this**.loginType="username"  
   
 }  
 }  
})
```

В первом участке кода мы создаем vue экземпляр, привязываем по id к html разметке, создаем свойство в data loginType, и метод который изменяет значение нашего свойства в data на другое и обратно, далее в html:

```
\<div id="comp-container"\>  
 \<template v-if="loginType === 'username'"\>  
 Имя пользователя  
 \<input placeholder="Введите имя пользователя"\>  
   
 \<template v-else\>  
 Email  
 \<input placeholder=""\>  
   
 \<button @click="changeLogType"\>Change
```

При совпадении значения показывается первый блок, в котором надо ввести имя пользователя, а если тип логина не username то показывается второй блок, по кнопке можем изменять тип логина, вся фишка в том что если не дописать тут атрибут key тогда у них будет общее поле, то есть не индивидуальное, а одно на двоих, то есть js в сочетании с верхним блоком будет давать в текстовом поле один результат в placeholder.

```
\<div id="comp-container"\>  
 \<template v-if="loginType === 'username'"\>  
 Имя пользователя  
 \<input placeholder="Введите имя пользователя" key="username-input"\>  
   
 \<template v-else\>  
 Email  
 \<input placeholder="" key="email-input"\>  
   
 \<button @click="changeLogType"\>Change
```

А если же дописать атрибут key, так мы их сделаем уникальными, и избежим выделения одного поля для ввода сразу для двух вероятных блоков)