как бороться с этим?

код шаблона может покажете?

извиняюсь, вот <td v-for="day in doctor.schedule"> <p v-for="timeslot in day "> <button @contextmenu.prevent="handleRightClick" @click="handleLeftClick" class="btn1 btn-8 btn-8g" id="<% timeslot._id %> <% timeslot.begin_time | timeslotBeautify %> </button> </p> </td>

Если я выношу <% timeslot.begin_time | timeslotBeautify %> за пределы кнопки(просто как текст) все шустро

<% timeslot.begin_time | timeslotBeautify %> - это текст серверным шаблонизатором подставляется?

это из модели тянется

если я правильно вас понял

Просто это не шаблон Vue, насколько я помню (если они во второй версии не добавили альтернативный синтаксис).

это первая версия, и этот кусок у меня обрамлен в <template>

<% %> - это какой-то другой шаблонизатор, не Vueшный. Например, это у вас лежит на сервере, потом какой-нибудь Smarty (хотя у него {} вроде, не <> ) вставляет туда вместо <% timeslot.begin_time | timeslotBeautify %> что-то, и только после этого, на клиенте, Vue обрабатывает этот шаблон. Верно?

аааа, да, сори это ву, но мне пришлось переопределить делимитеры(привет handlebars). Считайте что это {{ }}

А, ясно.

я не понимаю, как кнопки могут так сильно замедлять загрузку

А если обработчики убрать? @contextmenu.prevent="handleRightClick" @click="handleLeftClick"

А если обработчики убрать? @contextmenu.prevent="handleRightClick" @click="handleLeftClick"

чуть быстрее, но проблема не решена остается

Это не кнопки, это фильтры, думаю. Уберите | timeslotBeautify и, почти наверняка, все будет быстро

Это не кнопки, это фильтры, думаю. Уберите | timeslotBeautify и, почти наверняка, все будет быстро

я выносил этот текст вне кнопки вместе с фильтром, и выдавалось моментально)

если убрать обработчики и стили, получается сносно по скорости но неужели это обязательная мера, в этой ситуации?

Получается, что он у вас 300 раз там фильтрует текст. Возможно, как-то не оптимально фильтрует.

скиньте его код

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

Получается, что он у вас 300 раз там фильтрует текст. Возможно, как-то не оптимально фильтрует.

timeslotBeautify: function (value) { return moment(value).format('HH:mm') }

это у вас MomentJS там вызывается?

или как его..

да

Собственно, вот и ответ. 300 раз дергать какую-то библиотеку, которая еще, наверняка, ворочает регулярками - плохая идея :)

а как скорость замерялась?

а как скорость замерялась?

по личным ощущениям, и девтулз

пока пришел к выводу(убирая то одно, то другое), что обработчики, стили кнопки, и фильтр в равной степени режут скорость

У меня в проектах через момент и большее количество элементов рендерили, он тормозной, но на сильно больших коллекциях. Но всеже лучше обработать коллекцию до вставки в шаблон. Еще для 1 vue могу посоветовать ввставлять track-by и {{*

для id тоже А то что из-за стилей тормозит - впервые слышу

там чуть меньше 500 кнопок оказалось, на странице можете еще подсказать, куда гуглить, про вынесение хэндлеров нажатия в род. компонент

да на родительский элемент вынеси и через event.target смотри по id что заа элемент

<button class="btn1 btn-8 btn-8g" > <% timeslot.begin_time %> </button> оставил вот так, все равно виснет сильно

что самое странное, лагает не только этот компонент, а весь сайт

например модал-окно из другого компонента(будучи в этой странице) открывается секунды 3 :)

хотя компонент с расписанием рендериться 1 раз за загрузку страницы, и потом ничего с ним не происходит

убираю кнопки, оставляю текст - весь сайт бегает ок

в общем ладно, спасибо всем за советы, видать не тривиальный случай, буду разбираться )

@Spiritized Разобрался? Расскажи, если что

@Spiritized Разобрался? Расскажи, если что

нет, сделал пагинацию, вместо вывода всех данных на одной странице?

https://josephuspaye.github.io/Keen-UI/#/ui-modal-docs ребят, знаете как в такую модалку передавать динамические данные? грубо говоря, по нажатию кнопки(открывающий модальное окно) я хочу в него закинуть данные из модели, в зависимости от кнопки на которую он нажал

https://github.com/JosephusPaye/Keen-UI/blob/master/src/UiModal.vue по сути это просто компонент, поэтому знания этого UI kit'a не обязательно

надо в исходник модалки свой prop добавить, наверно?

https://josephuspaye.github.io/Keen-UI/#/ui-modal-docs ребят, знаете как в такую модалку передавать динамические данные? грубо говоря, по нажатию кнопки(открывающий модальное окно) я хочу в него закинуть данные из модели, в зависимости от кнопки на которую он нажал

Ты в модалку передаешь ее тело. Собственно телом и манипулируй

Как я понимаю, ты можешь сделать так <ui-modal>{{//modal body}}</ui-modal>

A modal-body ты можешь манипулировать как угодно.

Ребят, подскажите. Вот делаю я простую страницу html с vuejs, при загрузке страницы там до того как всё прогрузится показывает все эти скобки и переменные типа {{ varBlabla }} и через доли секунд всё становится нормально. Так вот, как мне сделать чтобы не было всех этих скобочек при загрузке?

http://vuejs.org/api/#v-cloak

<span v-text="msg"></span> <!-- same as --> <span>{{msg}}</span> Или использовать первый вариант

Понятно, спасибо

а куда это писать? [v-cloak] { display: none; } У меня если просто html файл и в нем же стили прописаны, если я в стилях это напишу, Vue всё сам поймет?

хороший вопрос

я бы просто класс добавил на эту пропертю

понял

пропертя - отличное слово

но тоже интересно в вдруг засахарили

а. ты вообще не то спрашиваешь

он просто же не добавляется в дом совсем

пиши в стили. когда вью загрузиться и откомпилирует инстанс, то v-cloak уберется

Ты в модалку передаешь ее тело. Собственно телом и манипулируй

а как body передавать, если она дефайниться через slot? т.е. сейчас выглядит вот так <ui-modal :show.sync="show.modal2" header="Appointment details" > <div slot="default"> здесь боди модалки </div> </ui-modal>

кто нибудь знает как получать доступ к props, которые декларируются не как props = ['someProp'] а как props: { name: { type: String, default:"Initial Name" } }

а такой вопрос

мне не нужна модель. у меня своя

ERROR: S client not available

имеет смысл тогда юзать вуе или смотреть на реакт ?

Сложный вопрос:)

проперти слишком сахарные

Жквери

что жквери

Юзай)

жквери не очень подходит

в идеале я бы мог сделать всё через computed property но непонятно как оно резолвит от чего зависит и внутри не умеет изменять

как же всё плохо с документацией. нашел в каком то бложике That is because, in Vue 2, mutating a prop locally is considered an anti-pattern. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten. You should now treat props as immutable. https://dotdev.co/peeking-into-vue-js-2-part-1-b457e60c88c6#.njlu4tx6t

а что значит "своя модель"?

значит что стейт не представлен жсоном а есть некотороые обьекты

хотя я уже думаю что надо всёравно жсоном представлять

а напомните как v-model разворачивается ?

ребят, а может ли $dispatch вернуть от родителя false(fail) ?

хаха. нашел еще прикол

родитель слушает оказывается некоторые ивенты от компонентов

вкрысу

а напомните как v-model разворачивается ?

ох еле нашел https://vuejs.org/guide/components.html#Form-Input-Components-using-Custom-Events

а vue resources для 2.0 работает?

а vue resources для 2.0 работает?

Да

Гайз, такая проблема. Сайт партнер подключает мой апп на реакте. Скрипт в кодировке UTF-8, сайт в кодировке той-которую-нельзя-нызывать-в-приличном-обществе. В итоге на сайте вместо православной кириллицы - чертово нечто

Есть способ это обойти, не меняя кодировки ни скрипта, ни сайта?

Может кто сталкивался с подобным?

<script src="myscripts.js" charset="UTF-8"></script> не поможет?

Да вот хз, нет доступа к сайту

А так можно?

Бывали кейзы?

http://www.w3schools.com/tags/att_script_charset.asp

неа, не было

еее, рокк!

Спасибо!