0

У меня есть список задач, прилетающий с бэка, который перебирается в 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, но это мне кажется не изящным решением. Какие варианты? Что я упускаю?

1 ответ 1

0

Попробуйте использовать встроенные возможности vue - TransitionGroup https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions

<template>
    <TransitionGroup name="list" tag="ul">
        <app-task v-for="item in items" :key="item.id" :item="item"></app-task>
    </TransitionGroup>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.