Всем доброго времени суток, читал что есть такая штука как key, и что с помощью неё можно переиспользовать элементы страницы, но немного не понял, в каком это плане можно переиспользовать, если и так можно по сути реюзать любую часть, был бы благодарен если бы кто то объяснил или показал на примере)
Да, есть такая штука, оч полезная кстати, с помощью атрибута 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>
<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>
<input placeholder="" key="email-input">
<button @click="changeLogType">Change
А если же дописать атрибут key, так мы их сделаем уникальными, и избежим выделения одного поля для ввода сразу для двух вероятных блоков)