вот такой фрагмент из компонента
<div class="col-span-3 grid grid-cols-3 gap-4">
<div v-for="user in usersGet" :key="user.id">
<video class="rounded-lg"
autoplay controls
:muted="user.id === LOCAL_USER"
:ref="(el) => el && (el.srcObject = user.media)"
/>
</div>
</div>
usersGet - computed getter из vuex
Далее в этом же компоненте есть такой фрагмент
<div class="flex justify-center gap-3">
<input v-model="messageInput"
type="text"
class="input"
placeholder="Написать сообщение..."
/>
<button @click="SendMessage" class="btn">Отправить</button>
</div>
messageInput - ref("")
Почему при каждом вводе в инпут перерендериваются видео элементы? Ключ стоит, он консистентен, не обновляется, сайд эффектов при инпуте нет.
Под "перерендеривается" имеешь в виду, что именно vue рендеринг срабатывает, или что DOM элемент пересоздаётся?
Элемент пересоздается, видео мигает на секунду, изменяя свои размеры
Это всё не в форме случайно?
Проверь, не пересоздаётся ли компонент. Например, добавь лог в mounted. Вся эта часть шаблона не внутри component :is случайно?
Нет компонент не пересоздается Нет, component :is нет
А, увидел. У тебя же при каждом рендеринге мутируется DOM элемент видео
Не подскажите как исправить?
Убрать из шаблона функцию, которая мутирует DOM
Обсуждают сегодня