🅅aleriy
если юзер сталкивается с косяком, просто жмякает и мне приходит полный дамп стейта приложения
Armen
Да, просто пока сам не споткнёшься не поймёшь, что нужно
Роман
мой костыль пока выглядит так
<loader :isPending="isPending" >
<template v-if="isPending == false">
Armen
<template>
<div v-if="isPending">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
<div v-else >
<slot v-bind="data"></slot>
</div>
</template>
//////
<loader :isPending="isPending" :data="data" >
<template slot-scope="{ name }">
<h2 class="display-1">{{ name }}</h2>
</template>
</loader>
Armen
Но это надо проверить
Armen
Ой
Armen
Сек
Armen
Пофиксил
Armen
Надо ещё проп data в компоненте лоадер
Александр
Новый супергерой Фиксмен.
Александр
Фиксит говнокод.
Александр
Может это делать даже на продакшн
Armen
Другим говнокодом
Александр
Замазывает щели
Armen
Скотчем
Stanislav
Александр
У фиксмена обязательно должна быть недельная небритость и красные вены в глазах.
Armen
У фиксмена обязательно должна быть недельная небритость и красные вены в глазах.
Тогда я не подхожу(
Armen
мой вариант "на коленке"
https://codesandbox.io/s/wqvl3qooq8
Твой варик ничего не решает, если юзать данные в слоте - проблема остаётся
Armen
https://codesandbox.io/s/qx849m62y9
Роман
мой вариант "на коленке"
https://codesandbox.io/s/wqvl3qooq8
посмотрел, но не увидел как он решает проблему не рендера того, чего нет. У тебя там константа, строка
Rick
После сегодняшнего понял, что это очень удобно, и на проде можно будет детектить ошибки, и отправлять репорт на серв, чтобы можно было возпроизвести ситуацию и понять из-за чего вылетело
как вы вообще что либо без вьюксов и радаксов пишите
Роман
<template>
<div v-if="isPending">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
<div v-else >
<slot v-bind="data"></slot>
</div>
</template>
//////
<loader :isPending="isPending" :data="data" >
<template slot-scope="{ name }">
<h2 class="display-1">{{ name }}</h2>
</template>
</loader>
нужно проверять, я так понял, что протащил data через слот. Оно должно работать, если я решу написать {{ name.length }} или проблема решается на 1 уровень?
Armen
нужно проверять, я так понял, что протащил data через слот. Оно должно работать, если я решу написать {{ name.length }} или проблема решается на 1 уровень?
Тут фишка в том, что слот рендерится в ребёнке, но для этого надо прокинуть данные, чтобы ребёнок передал их от родителя к слоту
Armen
А про уровни то там пофиг
Роман
ща покурю slot-scope
Armen
<template>
<div v-if="isPending">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
<div v-else >
<slot v-bind="data"></slot>
</div>
</template>
//////
<loader :isPending="isPending" :data="data" >
<template slot-scope="data">
<h2 class="display-1">{{ data.name }}</h2>
<h2 class="display-1">{{ data.surname }}</h2>
<img :src="data.avatar.src"/>
</template>
</loader>
Armen
Можно вот так, но для удобности я сделал там деструктуризацию
Роман
Звучит как ответ мой вопрос
> Слот с ограниченной областью видимости — это особый тип слота, который применяется как повторно используемый шаблон, то есть в этот слот передаются данные, а не уже отрендеренные элементы.
Armen
<template>
<div v-if="isPending">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
<div v-else >
<slot v-bind="data"></slot>
</div>
</template>
//////
<loader :isPending="isPending" :data="data" >
<template slot-scope="{name, surname, avatar}">
<h2 class="display-1">{{ name }}</h2>
<h2 class="display-1">{{ surname }}</h2>
<img :src="avatar.src"/>
</template>
</loader>
Иван
Иван
Мои глаза мне не отказывают?
Иван
Тут за вьюкс топят?)
Armen
Это всё одмен
Armen
Я перешёл на светлую сторону
Роман
Роман
кажется работает, даже если не тащить данные
<loader :isPending="isPending" >
<template slot-scope="ololo">
Роман
главное slot-scope указать
Иван
Ну я говорю, это просто народ начинает вкуривать что что-то сложнее большого виджета (особенно если данные с бэка активно юзаются) без вьюкса хрен напишешь
Armen
Ненене так нельзя
Armen
Ибо компонент должен передать данные слоту сам
Armen
v-bind="data"
Armen
А чтобы он мог это сделать, надо ему дать дату
Роман
а чего тогда работает?
Armen
А что работает?
Armen
Вывод данных работает?
Иван
Бле, я ору с вашего диалога
Роман
да, вывод
Роман
так данные выводятся, ошибок в консоли нет
<template slot-scope="ololo">
Иван
Ну правильно все вроде. Ты в потомке на слот вешаешь скоуп?
Роман
так данные выводятся, но с ошибками
<template>
Armen
ЛОЛ, т.е. слоты ограниченой областью видимости имеют доступ к данными экземпляра, в котором объявлены?)
Armen
Норм так
🐏 Alexander
Роман
ага
Роман
меня устраивает :)
Armen
так данные выводятся, ошибок в консоли нет
<template slot-scope="ololo">
Попробуй <template slot-scope> )
Роман
пробовал, ошибки есть. Типа как будто и нет скоупа
Armen
ЛОЛ, т.е. слоты ограниченой областью видимости имеют доступ к данными экземпляра, в котором объявлены?)
Хмм, но странно, что этого не указали в доке
Armen
Или где-то прощёлкал
Иван
Так, падажжи
Иван
Все что объявлено в родительском темплейте имеет доступ к данным родителя
Armen
Да, но я чот решил, что слоты с ограниченной областью видимости не имеют
Armen
Область видимости же ограниченная)
Иван
Это которые scope?
Иван
Они просто дополнительно ещё и к данным потомка имеют доступ, именно к тем, которые потомок передал
🅅aleriy
хотелось бы понять зачем для врапера лоадера делать slot-scope?
Роман
получается, что слоты с ограниченной областью видимости умеют подтаскивать к родительским данным, данные из потомка, поэтому они сделаны ленивым рендером
Роман
<loader :isPending="isPending" >
<template slot-scope="fake">
<h2 class="display-1">{{data.name}}</h2>
Armen
Они просто дополнительно ещё и к данным потомка имеют доступ, именно к тем, которые потомок передал
Ага, я прост сам себе проблему создал)
Роман
если не будет slot-scope, то я получу в консоль
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of null"
Иван
Блин
Иван
Чет вы тупите
Иван
Что за "data.name"?
Иван
Где data объявлена?
Armen
Вот посмотри