Stanislav
Шик. То что надо. Но я давно юзал. Может тогда не было этого. Сейчас выглядит как то, что нужно )
Покрутил демку на телефоне. Прикольно, можно крутить, бросать, свапать)
Володимир
Приветствую.
Igor
вопросик, а как сделать такое есть компонент который показывается на определенное услови, и если условие выполнилось то нужно как будто инициализировать его
Володимир
У меня возник вопрос, собственно пробую разобраться с однофайловыми компонентами. Делаю компонент, передаю объект для создания кнопок. Кнопки создаются всё ок, но вот только событие не вызывается.
Володимир
Передаю так: v-bind:title-buttons="{'Add': { class: 'btn-outline-secondary', click: 'test' } }"
Володимир
Создаю в компоненте так: <div class="btn-group float-right" v-for="(value, key) in titleButtons" role="group"> <button type="button" class="btn" v-bind:class="value.class" @click="value.click">{{ key }}</button> </div>
Володимир
При клике: TypeError: fns.apply is not a function vue.common.js:2031 invoker vue.common.js:2031 withMacroTask/fn._withTask
Igor
https://ru.vuejs.org/v2/api/#v-show - оно?
просто показать не проблема нужно сделать нечто типа вызова cобытия change с деволтными параметрами
Andrey
добрый вечер, подскажите вот про это, что значит запись @update:foo="val => bar => val" для такого кусочка кода? <comp :foo="bar" @update:foo="val => bar = val"></comp> (взято из доки) @update это событие, :foo это значит при наступлениеи события @update у props :foo?
Igor
Передаю так: v-bind:title-buttons="{'Add': { class: 'btn-outline-secondary', click: 'test' } }"
А зачем ты внутри компонента генеришь другой компонент ? Можно же юзать slot, и в него вставлять компонент
Igor
https://ru.vuejs.org/v2/api/#vm-slots
Володимир
А зачем ты внутри компонента генеришь другой компонент ? Можно же юзать slot, и в него вставлять компонент
Я Vie только сегодня начал изучать. Решил для начала разобраться с шаблонизатором и компонентами. Как создаются они, как данные передаются. Притом тут ситуация такая что это компонент Card из Bootstrap. И кнопки нужно вставлять либо в header либо в footer, которые уже есть в компоненте
Andrey
human
Чуваки, как вынести ограниченное кол-во данных из массива ?
human
Из 9 - 6
Володимир
ну тут как раз юзать именованые слоты
ну да, это легче всего. Но было бы всё-равно интересно разобраться как передавать, событие
human
Благодарю
human
Пойду делать
Igor
ну да, это легче всего. Но было бы всё-равно интересно разобраться как передавать, событие
ну ты можешь просто слать название события, а в компоненте генерить функцию с таким именем
Володимир
ну ты можешь просто слать название события, а в компоненте генерить функцию с таким именем
ну мне то нужно выполнить событие которое находится в шаблоне, а не в компоненте
Володимир
а там я так понимаю изоляция происходит
Володимир
нужно получается именно ссылку на функцию передать
Igor
ну мне то нужно выполнить событие которое находится в шаблоне, а не в компоненте
export default { props: { onClickButton: String }, data: () => ({}), methods: { input: function (e) { this.$emit(this.onClickButton, e.target.value) } }, } что то типа того
Igor
нужно получается именно ссылку на функцию передать
не ссылка тебе не нужна, у тебя есть on и emit
Igor
один тригерит событие с нужным именем внутри компонента, другой его слушает
Володимир
ну примерно понял, только для массива тут нужно вначале считать все события, потом определять какое событие куда.
Володимир
в общем больше гемора
Володимир
в случае если добавляется не одна кнопка я имею ввиду
Igor
ну тут надо смотреть как ты это собрался делать, если на основании js объекта генерить компонент то давольно просто
Igor
но тут больше гемора мне кажется, слоты намного проще
Anton
ребят, можно пример, когда необходимо прокидвывать props?
Alex
Всем привет! Такой вопрос: юзаю upload компонент из buefy. Когда выбираю нужные файлы они записываются в филд моего компонента. Потом мне нужно кодировать их в base64, обернуть в тэг img и отобразить в виде списка. У меня не получается правильно заюзать FileReader для кодирования. Вот кусок тимплейта и метод который юзаю. Куда копать? Может есть уже какое-то готовое решение для таких задач? <li style="width: 66px" v-for="p in company.photos"> <img :src="getBase64(p)" alt=""> </li> getBase64(file) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { console.log(reader.result); return reader.result; }; reader.onerror = function(error) { console.log('Error: ', error); };
Alex
обоссанное форматирование…
Oleksandr
Покрутил демку на телефоне. Прикольно, можно крутить, бросать, свапать)
Есть еще либа interactjs. Но там походу баги. Иногда нереальные цифры выдает. И нет нормальных событий zoom, rotate
Igor
А подскажите есть ли какие то хуки которые страбатывают на появление / скрытие компонента ? нужно сделать что то типа 2х события initialize / terminate
Igor
ткните носом в доку где прочитать про жизненый цыкл ?
Oleksandr
Смотря какая у тебя задача
Alex
ткните носом в доку где прочитать про жизненый цыкл ?
можешь здесь почитать https://habrahabr.ru/company/mailru/blog/350962/
Oleksandr
https://vuejs.org/v2/guide/transitions.html
Igor
пасиб сейчас почитаю
Anonymous
а куда @Fl0pZz и @alex_sokolov пропали? готовятся к конфе по Vue? )
Rafael 🌵
Какой там
Rafael 🌵
Просто у меня сессия на носу
Mike
Привет! как отключить debug в браузере чтобы он не моргал при ошибках.?
Igor
а есть какие то хуки которые срабатывают на v-show ?
Anonymous
Какой там
а я думал, ты уже кропаешь текст выступления )
Rafael 🌵
В этот раз ну сооовсем никак
Rafael 🌵
В след раз попробую
Anton
Антон Середний: ребят, можно пример, когда необходимо прокидвывать props?
Stanislav
🐏 Alexander
Антон Середний: ребят, можно пример, когда необходимо прокидвывать props?
тебе не ответили первый раз, потому что твой вопрос ужасно глупый
Anton
и сравнение с аргументами функции - тоже полное незнание
Anton
ладно, спасибо
Alex
рашн комьюнити, одним словом.
не обижайся, мне тоже не ответили)
Anton
та все норм, я ж не барыня) если вопрос тупой, значит, сам виноват. хрен с ним, даижемся дальше
Alex
+++
Igor
Антон Середний: ребят, можно пример, когда необходимо прокидвывать props?
ну смотри банальный пример, у тебя есть компонент кастомный селект, в котором 10 значений но поумолчанию тебе нужно показывать активное 3 значение, так вот ты передаешь пропс со значением value
Anton
Обоснуй
тут прошу прощения, сравнение имеет место быть
Igor
этот
а ты уверен что у тебя вот это работает правильно getBase64(p) ?
Igor
какой результат ?
Igor
и что такое p ? может ссылочку на доку ?
🐏 Alexander
самое четкое описание, это у реакт, предположим, что компонент - это функция, которая возвращает ui, в зависимости от состояния, этот ui изменяется (state) => ui например function Button(props) { return <button disabled=props.disabled /> }
Alex
я немного разобрался, вот эта хрень выполняется асинхронно, поэтому не работает reader.onload = function() { console.log(reader.result); return reader.result; };
Alex
но пока не знаю как чинить