Изучаю Laravel + VUE. Не получается синхронно вывести цикл внутри модального окна. Есть заметный скачок при открытии. Если включить замедленный режим – вначале появляется маленькое пустое модальное окно, затем оно расширяется при отрисовке списка v-for.
Как я делаю:
Кнопка открытия модального окна (сама кнопка находится в цикле v-for)
<button type="button" class="btn btn-primary btn-sm mt-2" @click="modalOpen(product.id)">Списки</button>
Запускается метод, который ставит переменной тру
modalOpen(id) {
this.product_id = id,
this.active = true,
}
Компонент модалки вынесен из цикла и запускается через v-if ориентируясь на переменную active
<modal-list v-if="active"
:product_id="product_id"
:active="active"
>
</modal-list>
Соответственно v-if ом запускается компонент ModalList (модалка со списком).
В нем модалка принимает пропсы
props: [
'product_id',
'active'
],
И показывает себя через v-show. Ориентируясь на пропс active
<transition name="modal" v-show="this.active">
Вместе с запуском компонента модалки фетчатся списки:
mounted() {
this.fetchDataLists();
}
методом
fetchDataLists() {
product_id=this.product_id
axios.get(`/json/datalist/${product_id}`)
.then(response => {
this.datalists = response.data.data;
})
},
Которые затем выводятся через v-for
<template v-for="(list, index) in datalists" v-model="datalists">
И именно последний v-for имеет запоздалую отрисовку. Что портит ощущение реактивности)
Я пробовал фетчить списки в родительском компоненте и передавать их через props (т.е. метод fetchDatalists запускать не дочернем компоненте ModalList, а в родительском и потом просто передавать массив данных дочернему). Да, тогда проблема с отрисовкой пропадает. Но появляется другая проблема уже не эстетического характера - мне нужно изменять массив данных datalists (через VUE.set), а пропсы насколько я прочитал изменять нельзя. В общем. Как можно синхронизировать отрисовку f-vor внутри модального окна, чтобы сформированный список данных показывался внутри модалки вместе с отрисовкой модалки, а не после нее?
