всё ок {data: ƒ, name: "pretty-csr", props: Array(1), watch: {…}, render: ƒ, …}

всё ок {data: ƒ, name: "pretty-csr", props: Array(1), watch: {…}, render: ƒ, …}

Тогда код в студию

ребят привет, небольшой вопрос, есть ли какой-нибудь способ, чтобы не писать в каждом методе let vm = this при написании однофайлового компонента?

ребят привет, небольшой вопрос, есть ли какой-нибудь способ, чтобы не писать в каждом методе let vm = this при написании однофайлового компонента?

Стрелочные функции

а как они помогут в этом случае?

а как они помогут в этом случае?

Именно так, как спрашиваешь

Ребята, нужна помощь. Во vue-devtools показывается большое количество root-компонетов, что может быть не так?

У меня такое было, проблема была в том, что на сервере рендерилось не так же как на клиенте, а конкретно - у меня был условный рендеринг внутри <transition> и на сервере получалось так, что условие ложное и содержимое transition было пустым

господи, когда же сука стрелочные ф-ии все знать будут

?

Бомбануло

бля, помогли))

шучу, нет

В стрелочной функции this будет указывать на vm

Тогда код в студию

Компонент <template> </template> <script> export default { data: function () { return { csr: null, priv: null } }, name: 'pretty-csr', props: ['instance'], watch: { instance (val) { this.csr = val['csr'] this.priv = val['priv'] } } } </script> <style scoped> </style>

в реакте топят за styled-components, мне это не нравится, придумали еще одну абстракцию/синтаксис, надо чтобы редактор поддерживал, хрень какая-то

Компонент <template> </template> <script> export default { data: function () { return { csr: null, priv: null } }, name: 'pretty-csr', props: ['instance'], watch: { instance (val) { this.csr = val['csr'] this.priv = val['priv'] } } } </script> <style scoped> </style>

А components где?

идея отличная, реализация отстой

А components где?

это дочерний

У меня такое было, проблема была в том, что на сервере рендерилось не так же как на клиенте, а конкретно - у меня был условный рендеринг внутри <transition> и на сервере получалось так, что условие ложное и содержимое transition было пустым

Оно повлияет на производительность?

Оно повлияет на производительность?

Ваще хз

Но явно это не к добру

Ну и у меня было только два рута

А не дофигище как у тебя

Охохо

А components где?

Вот так импортирую import PrettyCSR from '../prettydisplay/PrettyCSR' export default { components: { PrettyCSR },

Один раз три было, но потом опять два

Вот так импортирую import PrettyCSR from '../prettydisplay/PrettyCSR' export default { components: { PrettyCSR },

А шаблон, в котором его используешь ?

В стрелочной функции this будет указывать на vm

спасибо)) вообщем нашел что искал в примерах, возможно кому-то еще будет интересно https://gist.github.com/JacobBennett/7b32b4914311c0ac0f28a1fdc411b9a7

А шаблон, в котором его используешь ?

<v-stepper-content step="3"> <pretty-csr :instance="created"></pretty-csr> </v-stepper-content>

<v-stepper-content step="3"> <pretty-csr :instance="created"></pretty-csr> </v-stepper-content>

При такой записи тебе надо будет его использовать как pretty-c-s-r

Импортируй как PrettyCsr

Импортируй как PrettyCsr

Спасибо большое

Привет! Новичок в Vue. Разработал интерфейс управления заказами интернет-магазина. Должен открываться в браузере. Но все это жутко тормозит на слабых мобильниках. Есть какой-то чеклист с типичными ошибками по части производительности Vue на моб. платформах? Не соображу какой запрос в гугл даже задать.

Привет! Новичок в Vue. Разработал интерфейс управления заказами интернет-магазина. Должен открываться в браузере. Но все это жутко тормозит на слабых мобильниках. Есть какой-то чеклист с типичными ошибками по части производительности Vue на моб. платформах? Не соображу какой запрос в гугл даже задать.

Здаров. Гугли что такое профайлер в devtools

Я его видел, только не понимаю как им пользоваться. Есть где-то внятный мануал на русском?

Я его видел, только не понимаю как им пользоваться. Есть где-то внятный мануал на русском?

На русском вряд-ли

А чеклист типичных ошибок в Vue имеется?

А чеклист типичных ошибок в Vue имеется?

Не имеется. Vue, скорее всего, вообще не причем. Может ты там запросы синхронно шлёшь

У меня подозрение, что Vue плохо дружит с многоуровневыми массивами. Так ли это?

У меня подозрение, что Vue плохо дружит с многоуровневыми массивами. Так ли это?

В массиве больше 100к элементов?

Вангую, какой-нибудь длинный список рендеришь

Нет, там элементов в первом уровне измеряется десятками. Но у каждого элемента-заказа есть свойства заказа, товары в заказе, у каждого товара свойства и т. д.

И key не указываешь

И key не указываешь

указываю

Ок

У меня подозрение, что Vue плохо дружит с многоуровневыми массивами. Так ли это?

причем тут вью до массивов

Я его видел, только не понимаю как им пользоваться. Есть где-то внятный мануал на русском?

а ясно, ищи на русском

причем тут вью до массивов

При том, что он отслеживает изменения в этом массиве

значит ты делаешь что-то не то

При том, что он отслеживает изменения в этом массиве

У тебя явно проблема не во Vue

значит ты делаешь что-то не то

капитан!)

ребят, кто-то с handsontable работал?

При ререндере таблице слетают хуки, а просто при динамической смене пропсов - не меняется ширина

ширина при этом ставится в настройки таблицы, а потом убирается перед сменой

Приветствую! подскажите пожалуйста, как мне из дочернего компонента, следить, за родительскими элементами? ...или еще, как мне из родителя вызвать дочерний метод, для изменения дочернего свойства? Я запихнул всю логику работы "нового элемента" для todo в компонент, и если нет элементов в списке то он нам в плейсхолдере пишет "А", а если список не пуст "B". Сначало все вроде бы хорошо и правильно, при добавлении элементов. Но когда мы удаляем элементы(логика родительского компонента), то компонент дочерний, отвечающий за добавление элемента — не обновляет значения плейсхолдера. ...не знаю как это сделать правильно.

ручной ререндер показывает писюн

Приветствую! подскажите пожалуйста, как мне из дочернего компонента, следить, за родительскими элементами? ...или еще, как мне из родителя вызвать дочерний метод, для изменения дочернего свойства? Я запихнул всю логику работы "нового элемента" для todo в компонент, и если нет элементов в списке то он нам в плейсхолдере пишет "А", а если список не пуст "B". Сначало все вроде бы хорошо и правильно, при добавлении элементов. Но когда мы удаляем элементы(логика родительского компонента), то компонент дочерний, отвечающий за добавление элемента — не обновляет значения плейсхолдера. ...не знаю как это сделать правильно.

пропс даун, евентс ап

Приветствую! подскажите пожалуйста, как мне из дочернего компонента, следить, за родительскими элементами? ...или еще, как мне из родителя вызвать дочерний метод, для изменения дочернего свойства? Я запихнул всю логику работы "нового элемента" для todo в компонент, и если нет элементов в списке то он нам в плейсхолдере пишет "А", а если список не пуст "B". Сначало все вроде бы хорошо и правильно, при добавлении элементов. Но когда мы удаляем элементы(логика родительского компонента), то компонент дочерний, отвечающий за добавление элемента — не обновляет значения плейсхолдера. ...не знаю как это сделать правильно.

1) Можешь следить за пропсами с помощью watch, но вероятнее всего тебе это не нужно. 2) Из родителя можно вызвать через $refs или через event bus, загуглишь

опять же, вероятнее всего ты можешь обойтись пропсами

1) Можешь следить за пропсами с помощью watch, но вероятнее всего тебе это не нужно. 2) Из родителя можно вызвать через $refs или через event bus, загуглишь

Набор антипаттернов просто)

опять же, вероятнее всего ты можешь обойтись пропсами

спасибо, за подсказку. загуглю.

Набор антипаттернов просто)

"вероятнее всего - тебе это не нужно"

Набор антипаттернов просто)

что не так, то вотчем за пропсами?

Набор антипаттернов просто)

Вот, а есть где ознакомиться со всем списком антипаттернов?)

Вот, а есть где ознакомиться со всем списком антипаттернов?)

В этом чатике)

что не так, то вотчем за пропсами?

ходят слухи, что вотчеры, рефы и шины это ненужные излишки я придерживаюсь, что если это есть в фрейме и можно красиво это обыграть - то в бой

смешались в кучу кони люди

прочитал с такой интонацией :D где мой монокль

рефс ужобный оферхед, но он не реактивный

В этом чатике)

Да тут засрано мама не горюй)) фиг че найдешь

ходят слухи, что вотчеры, рефы и шины это ненужные излишки я придерживаюсь, что если это есть в фрейме и можно красиво это обыграть - то в бой

Своеобразные у вас представления о красоте, сударь)

1) Можешь следить за пропсами с помощью watch, но вероятнее всего тебе это не нужно. 2) Из родителя можно вызвать через $refs или через event bus, загуглишь

И о чудо! Никаких пятен!!!1 ранее я писал так, и не работало: watch: { todo: function() { console.log("ТАЙД ИЛИ КИПЯЧЕНИЕ") } Но если написать вот так, то работает: watch: { 'todo.items.length': function(newVal, oldVal) { // watch it console.log('ТАЙД: ', newVal, ' | ПРОСТО ПАРАШОК: ', oldVal) } Спасибо!

ох бля

пиздец

ебанутся

И о чудо! Никаких пятен!!!1 ранее я писал так, и не работало: watch: { todo: function() { console.log("ТАЙД ИЛИ КИПЯЧЕНИЕ") } Но если написать вот так, то работает: watch: { 'todo.items.length': function(newVal, oldVal) { // watch it console.log('ТАЙД: ', newVal, ' | ПРОСТО ПАРАШОК: ', oldVal) } Спасибо!

тебя ничего не смущает?

Приветствую! подскажите пожалуйста, как мне из дочернего компонента, следить, за родительскими элементами? ...или еще, как мне из родителя вызвать дочерний метод, для изменения дочернего свойства? Я запихнул всю логику работы "нового элемента" для todo в компонент, и если нет элементов в списке то он нам в плейсхолдере пишет "А", а если список не пуст "B". Сначало все вроде бы хорошо и правильно, при добавлении элементов. Но когда мы удаляем элементы(логика родительского компонента), то компонент дочерний, отвечающий за добавление элемента — не обновляет значения плейсхолдера. ...не знаю как это сделать правильно.

заюзай event bus

заюзай event bus

сейчас погуглю. спасибо.

тебя ничего не смущает?

я очень обрадовался, что работает, наконец. извиняюсь, если вам показалось это не уместным.

а без lenth не работает?

и зачем тебе следить за items

а без lenth не работает?

рабоатет.

рабоатет.

давай есть слона по частям. У тебя есть компонент, который пропсами перекидывает данные (условно - todo.items) Дочерний должен следить за ними и выдавать результат в зависимости от длинны todo.items Верно?

давай есть слона по частям. У тебя есть компонент, который пропсами перекидывает данные (условно - todo.items) Дочерний должен следить за ними и выдавать результат в зависимости от длинны todo.items Верно?

да. именно так.

сейчас погуглю. спасибо.

в родителе ставь watch на items watch: { 'todo.items': function(newVal,oldVal) { this.$bus.$emit('something', {'v1': newVal, 'v2': oldVal}); } }, в этом watch'e вызывай bus с параметрами. в дочернем компоненте вызывай created () { this.$bus.$on('something', ($event) => { console.log($event); }); },

в родителе ставь watch на items watch: { 'todo.items': function(newVal,oldVal) { this.$bus.$emit('something', {'v1': newVal, 'v2': oldVal}); } }, в этом watch'e вызывай bus с параметрами. в дочернем компоненте вызывай created () { this.$bus.$on('something', ($event) => { console.log($event); }); },

спасибо. сейчас испытаю.

и в app.js const EventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get: function () { return EventBus } } });

да. именно так.

И так, в дочернем компоненте у тебя есть пропс items Пропсы у нас реактивные - тобишь сами следят за изменением. Ты можешь сделать вычесляемые свойста, которые будут так же реактивны и так же менятся в зависимости от изменения передаваемого пропса. Тоесть ты можешь передать items и сделать computed, который будет возвращать значение в зависимости от длины items

И так, в дочернем компоненте у тебя есть пропс items Пропсы у нас реактивные - тобишь сами следят за изменением. Ты можешь сделать вычесляемые свойста, которые будут так же реактивны и так же менятся в зависимости от изменения передаваемого пропса. Тоесть ты можешь передать items и сделать computed, который будет возвращать значение в зависимости от длины items

Испробовал. работает. самый простой вариант. Изначально, пробовал его, но отвлекся на изучение $emit(...). Спасибо. я пожалуй так и оставлю.

Испробовал. работает. самый простой вариант. Изначально, пробовал его, но отвлекся на изучение $emit(...). Спасибо. я пожалуй так и оставлю.

я по-этому и сказал, что тебе не нужны в данном случае вотчеры, рефы и другая лабутень keep it low

в родителе ставь watch на items watch: { 'todo.items': function(newVal,oldVal) { this.$bus.$emit('something', {'v1': newVal, 'v2': oldVal}); } }, в этом watch'e вызывай bus с параметрами. в дочернем компоненте вызывай created () { this.$bus.$on('something', ($event) => { console.log($event); }); },

Вам тоже спасибо. этот вариант работает. я думаю знание этого мне пригодится. но для моих целей пока через чур сложен.

я по-этому и сказал, что тебе не нужны в данном случае вотчеры, рефы и другая лабутень keep it low

лол

лол

шо не так

Вам тоже спасибо. этот вариант работает. я думаю знание этого мне пригодится. но для моих целей пока через чур сложен.

сори, я не разобрался в вопросе, да, можно попроще сделать. а вот в случае, если, к примеру, есть список todo и у каждого айтема есть кнопка удаления с всплывающим окном подтверждения «вы уверны?», то event bus топ способ из модалки передать параметр в список) но вообще очень много всего в разные направления можно прокидывать

шо не так

прочел как на версусе прост. раунд ?

сори, я не разобрался в вопросе, да, можно попроще сделать. а вот в случае, если, к примеру, есть список todo и у каждого айтема есть кнопка удаления с всплывающим окном подтверждения «вы уверны?», то event bus топ способ из модалки передать параметр в список) но вообще очень много всего в разные направления можно прокидывать

Ооо! учту! ...я думаю. меня это рано или поздно настигнет) Пригодится. Благодарю за информацию.

сори, я не разобрался в вопросе, да, можно попроще сделать. а вот в случае, если, к примеру, есть список todo и у каждого айтема есть кнопка удаления с всплывающим окном подтверждения «вы уверны?», то event bus топ способ из модалки передать параметр в список) но вообще очень много всего в разные направления можно прокидывать

в таком случае эмитишь на верх айтем и делаешь конфирм, удаление в родителе

в таком случае эмитишь на верх айтем и делаешь конфирм, удаление в родителе

я про не взаимосвязанные компоненты