У меня есть список задач, прилетающий с бэка, который перебирается в v-for и каждый элемент оборачивается в компонент AppTask. У каждого элемента есть заголовок. Я хочу при нажатии на заголовок анимировать нажатие и Добавлять класс. Проблема в том как идентифицировать конкретный элемент в момент нажатия. Если, например, для удаления я буду использовать id элемента, выполнять функцию удаления и перезаписывать данные, которые реактивно обновятся на сайте то как быть с простой анимацией? В документации не нашел описания ситуации, а в разных уроках приводят примеры, в которых предусмотрен параметр в JSON - isVisible какой нибудь, которым манипулируют. Но не записывать же на бэке еще и состояние элемента?! Вот например JSON с элементами:
"items": [
{
"id": 123,
"list_id": 34,
"title": "new title 123",
"content": "Описание",
"created_at": "2022-02-24T23:53:11",
"updated_at": "2022-03-06T20:44:16",
"deleted_at": null
},
{
"id": 124,
"list_id": 34,
"title": "test item 2",
"content": null,
"created_at": "2022-02-24T23:53:13",
"updated_at": "2022-02-24T23:53:13",
"deleted_at": null
},
{
"id": 125,
"list_id": 34,
"title": "test item 3",
"content": null,
"created_at": "2022-02-24T23:53:14",
"updated_at": "2022-02-24T23:53:14",
"deleted_at": null
}
];
Код верстки:
<app-task v-for="item in items" :key="item.id" :item="item"></app-task>
Код компонента AppTask.
<template>
<div class="task">
<div class="task__header" ref="taskHeader">
<textarea class="task__header-name"
spellcheck="false"
dir="auto"
maxlength="512"
data-autosize="true"
style="overflow: hidden; overflow-wrap: break-word; height: 28px;"
:class="{'is-active':headerEdit}"
>{{ item.taskTitle }}</textarea>
</div>
</div>
</template>
export default {
data() {
return {
headerEdit: false
}
},
props: {
item: Array,
},
methods: {
editHeader(e){
let textarea = this.$refs.listHeader.querySelector('textarea');
textarea.focus();
textarea.selectionStart = textarea.value.length;
let target = e.target;
if (textarea !== target){
this.headerEdit = false
}
},
},
created(){
document.addEventListener('click', this.editHeader)
},
destroyed () {
document.removeEventListener('click', this.editHeader)
},
}
Собственно, я пробую сделать это через refs и вроде бы все работает на конкретном элементе, но если я выведу в консоль this.$refs.headerEdit
то выведутся все элементы на странице. Например, тот же textarea.value.length
считает длину всех элементов вместе взятых. Очевидно, потому что один ref ко всем элементам применяется. Я пробовал приконкатенировать id к ref, но это мне кажется не изящным решением.
Какие варианты? Что я упускаю?