@vuejs_ru
Vue.js — русскоговорящее сообщество

Общаемся на темы, посвященные Vue.js и опыту его использования. Проблемы. Новости. Решения. См. также: @js_ru, @react_js, @angular_ru, @nuxtjs_ru Вакансии только тут: @javascript_jobs

3988 members

Архив канала @vuejs_ru 15 декабря 2016 г.

05:38:51 ДП
User 55423102
У второго вебпака появился первый релиз-кандидат)
09:15:14 ДП
User 552804
<a v-for="link in links" v-if="link.is_active" :href="link.url" class="btn btn-block btn-info">@{{ link.title }}</a>
09:15:20 ДП
User 552804
есnm вот такой список кнопок
09:15:36 ДП
User 552804
link.url формата yandex.ru
09:15:52 ДП
User 552804
ссылки получаются такие - site.ru/yandex.ru
09:16:01 ДП
User 552804
как сделать чтобы это были внешние ссылки?
09:18:57 ДП
User 152816933
Добавь протокол или две палки // перед ссылками
09:28:45 ДП
User 552804
у меня поле может быть ссылкой или почтой
09:28:54 ДП
User 552804
если добавить палки или протокол то почта сломается(
09:29:09 ДП
User 552804
ладно, это пока фигня, разберусь попозже)
09:29:12 ДП
User 552804
другой вопрос возник
09:29:31 ДП
User 552804
вот есть у меня links, у каждой ссылки заголовок, урл и is_active
09:30:03 ДП
User 552804
есnm кнопка добавить новую ссылку, просто добавляется ссылка с пустыми заголовками и урлами и статус is_active = false
09:30:21 ДП
User 552804
мне надо чтобы при изменении этих даннох шла синхронизация с бэком
09:30:49 ДП
User 552804
<input class="form-control" v-model.lazy="links[index].title" type="text" placeholder="Название">
<input class="form-control" v-model.lazy="links[index].url" type="text" placeholder="Ссылка">
09:31:08 ДП
User 552804
вот в списке ссылок, поля
09:31:23 ДП
User 552804
watch: {
                links: function() {
                    this.syncLinks();
                }
}
09:31:44 ДП
User 552804
syncLinks: function() {
    this.loading = true;
    var links = this.links;
    this.$http.post('{{ route('api.links.sync') }}', links, {
        headers: {
            'X-CSRF-TOKEN': this.token
        }
    })
    .then(function (data) {
        this.links = data.data;
        this.loading = false;
    }, function (data) {
        var errors = data.data;
        this.loading = false;
        this.formErrors = errors;
    });
}
09:32:19 ДП
User 552804
и у меня при изменении инпутов идёт зацикливание, постоянно выполняется syncLinks
09:32:29 ДП
User 552804
даже просто страницу загрузить сразу идёт синхронизация
09:32:34 ДП
User 552804
а мне надо только при изменении
09:32:47 ДП
User 552804
тем более у меня v-model.LAZY
09:34:51 ДП
09:35:07 ДП
User 552804
вот для понимания
09:38:49 ДП
User 55423102
User 552804
<a v-for="link in links" v-if="link.is_active" :href="link.url" class="btn btn-block btn-info">@{{ link.title }}</a>
Я бы заранее в computed отфильтровал только активные ссылки
09:39:02 ДП
User 552804
ну это будет потом
09:39:06 ДП
User 552804
хотя и не обязательно
09:39:14 ДП
User 552804
там мало ссылок, так что разница не большая будет
09:39:40 ДП
User 55423102
А зацикливание потому что ты в конце watch обновляешь this.links и соответственно watch должен сработать снова
09:40:17 ДП
User 55423102
По мне так сразу надо делать) а то на отпуск "на потом" оставляешь то одно, то другое, а потом сидишь удивляешься откуда столько говнокода набралось 😅
09:40:22 ДП
User 55423102
*на откуп
09:40:40 ДП
User 552804
а смысл в такой фильтрации активных?
09:40:54 ДП
User 552804
первостепенная задача сделать синхроназицию
09:40:58 ДП
User 552804
при изменении инпутов
09:42:18 ДП
User 552804
а как сделать чтобы не было этого зацикливания?
09:42:37 ДП
User 552804
или просто другую функцию сделать, не syncLinks а типа updateLinks
09:42:51 ДП
User 55423102
просто вместо watch сделай метод который дергаться будет
09:43:54 ДП
User 552804
а всё, я просто в sync убрал обновление Links, jно всё равно не нужно было
09:44:00 ДП
User 552804
работает отлично
09:51:02 ДП
User 552804
блин, нет, не пойму
09:51:33 ДП
User 552804
если закомментить в syncLinks //this.links = data.data; то зачикливания не идёт, но и не сохраняется ничо
09:51:43 ДП
User 552804
а если раскомментить то зацикливается
09:52:21 ДП
User 552804
сделал в syncLinks в самом начале console.log(1);
09:52:33 ДП
User 552804
при запуске страницы в консоль пишется
09:52:50 ДП
User 552804
при изменении инпутов, соответственно и links в консоль не пишется
09:55:47 ДП
User 55423102
А что должно сохраниться?
09:56:08 ДП
User 552804
текст и урл
09:56:10 ДП
User 55423102
если ты уже ответ от сервера записываешь обратно в данные
09:56:21 ДП
User 552804
я не знаписываю
09:56:25 ДП
User 552804
я ж закомментил это
09:57:29 ДП
User 55423102
можешь сохранять с отложкой на какое-то время
09:57:35 ДП
User 55423102
пока типа печатаешь ну и печатаешь
09:57:37 ДП
User 552804
дело в другом
09:57:42 ДП
User 55423102
а сохранение после N-секунд тупления
09:57:48 ДП
User 552804
у меня вообще watch не срабатывает при изменении links
09:58:00 ДП
User 552804
ну я lazy для этого хотел
09:58:02 ДП
User 552804
вот смотри
09:58:41 ДП
User 552804
есть у меня Links и watch
watch: {
    links: function(e) {
        console.log(1);
    }
},
при изменении инпутов текста и урла не происходит запись в консоль
09:59:16 ДП
User 552804
или watch на изменение объекта не работает?
09:59:25 ДП
User 229165046
дип воч нужен
09:59:31 ДП
09:59:52 ДП
User 55423102
а, да... там есть опция deep: true
10:00:01 ДП
User 55423102
чтобы он не за массивом смотрел, а за его недрами тоже
10:00:15 ДП
User 552804
куда это пишется?
10:00:27 ДП
User 55423102
мне ещё нигде пока не пригодилась необходимость воспользоваться watch :) надеюсь так и будет продолжаться
10:01:00 ДП
User 215699186
у тебя данные по rest не ходят?
10:01:15 ДП
User 55423102
@perin https://ru.vuejs.org/v2/api/#watch
ru.vuejs.org/v2/api
Vue.js — Прогрессивный JavaScript-фреймворк
10:01:26 ДП
User 55423102
В примере "с"
10:03:52 ДП
User 552804
воо, идеально))
10:03:56 ДП
User 552804
не знаб про дип
10:04:02 ДП
User 552804
апи не смотрел, только доку
10:04:11 ДП
User 229165046
много всякой такой фигни вскрывается в процессе)
10:04:18 ДП
10:20:46 ДП
User 552804
https://github.com/kristianmandrup/vue2-dragula
github.com/kristianmandrup/vue2-dragula
:ok_hand: Drag and drop so simple it hurts http://astray-git.github.io/vue-dragula - kristianmandrup/vue2-dragula
10:21:12 ДП
User 552804
вот это можно ж без всяких вебпаков,ноджс, npm и тд установить?
10:21:19 ДП
User 552804
просто в папочку положить и подключить
10:21:35 ДП
User 552804
а то я ваш js недолюбливаю за все эти интсрументы))
10:22:38 ДП
User 142429867
User 552804
а то я ваш js недолюбливаю за все эти интсрументы))
а какой твой основной язык? там нет вендоринга разве?
10:22:48 ДП
10:22:49 ДП
User 552804
есть
10:22:55 ДП
User 142429867
User 552804
пхп
композер же
10:22:57 ДП
User 552804
но у меня хостинг без nodejs
10:24:44 ДП
User 552804
как можно его заюзать и не сломать себе мозг и проект
10:39:57 ДП
User 55423102
А на хостинге и не нужно. Собрал у себя локально и на хостинг закинул
10:40:18 ДП
User 552804
локально не люблю, да и у меня локально ничего не настроено тоже
10:41:11 ДП
User 142429867
User 552804
локально не люблю, да и у меня локально ничего не настроено тоже
в докере попробуй собирать
10:41:17 ДП
User 552804
попробую
10:49:01 ДП
User 40268779
подскажите где искать - вот такая ошибка - vue.js:2643 [Vue warn]: Error when rendering anonymous component:
10:49:21 ДП
User 40268779
указывает на начало кода главного компонента
10:49:31 ДП
User 40268779
var __app__ = new Vue({
    data: {
        products: [],
        pages: [],
        categories: []
    },
    el: '#app',
    router: router,
    template:
10:50:12 ДП
User 40268779
в нем ничего особо не просиходит, только по created событию подгружается json
11:14:23 ДП
User 55423102
Что за версии используются? Что там в шаблоне?
11:16:53 ДП
User 55423102
пример на jsfiddle?
11:28:20 ДП
User 152816933
Собираешь вебпаком из vue-cli?
01:14:30 ПП
User 40268779
User 152816933
Собираешь вебпаком из vue-cli?
нет, тупо index.html c шаблонами ввиде <template id="xxx">...  и     <script src="assets/js/vue.js">
01:15:21 ПП
User 40268779
User 55423102
Что за версии используются? Что там в шаблоне?
v2.0.5, в главном шаблоне просто вот
01:15:23 ПП
User 40268779
<template id="root">
        <div v-cloak>
            <router-view :pages="pages" :products="products" :categories="categories"></router-view>
        </div>
    </template>
02:18:43 ПП
User 133750577
Ребят, хочу ваше мнение
02:22:11 ПП
User 133750577
Пробую делать на Vue небольшой SPA, есть компоненты различных страниц, у всех есть одинаковая логика: сначала показывать анимацию загрузки, начать загружать ресурс с бека (json), а при получении данных уже отрисовать компонент. За каждую страницу отвечает отдельный single-файл компонент. Я думаю эту общую логику вынести в миксин, это правильно?
02:22:55 ПП
02:22:57 ПП
User 60331718
Взгляд делитанта: да
02:23:04 ПП
User 60331718
Там наследования нет ведь
02:24:00 ПП
User 133750577
Просто непонятно тогда, в миксине проверять наличие поля resources (urlы REST запросов), а определять его в самом компоненте?
02:25:54 ПП
User 133750577
Я понимаю, что это рабочее решенее, но мб есть что-то лучше, не хочется велосипедить
02:50:55 ПП
User 133750577
Да и задача, кажется, очень common
03:02:28 ПП
User 215699186
User 133750577
Просто непонятно тогда, в миксине проверять наличие поля resources (urlы REST запросов), а определять его в самом компоненте?
Я, честно говоря, не понял твой вопрос
03:09:35 ПП
User 133750577
Для каждой страницы есть необходимые для рендера ресурсы, их нужно запросить с бека, а пока они не пришли показывать лоадер. Эти ресурсы разные для каждой страницы. Вопрос в том, как проверять их наличие в миксине, если определяются они только в компоненте
03:10:35 ПП
User 215699186
У нас это через сервисы решено
03:12:13 ПП
User 215699186
Есть сервис, который имеет ряд метод, каждый метод - обращение к ресурсу. Vue.service('goods').filterGoods(data)
03:12:29 ПП
User 215699186
сервис в данном случае обертка над промисом
05:03:29 ПП
User 552804
помогите разобраться с drug and drop
05:03:48 ПП
User 552804
у меня есть массив links ссылки из которого отображаются списокм v-for
05:03:56 ПП
User 552804
надо сделать перетаскивание для изменения порядка
05:04:17 ПП
User 552804
дуvал подключить https://github.com/RubaXa/Sortable
github.com/RubaXa/Sortable
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g...
05:04:42 ПП
User 60331718
User 552804
надо сделать перетаскивание для изменения порядка
Sortable.js
05:04:50 ПП
User 552804
да без разницы какой плагин
05:04:53 ПП
User 552804
суть не в этом
05:05:10 ПП
User 552804
как при перетаскивании перекомпоновывать сам массив ссылок
05:05:17 ПП
User 552804
с новым порядком
05:05:22 ПП
User 552804
не очень понятно
05:11:07 ПП
User 60331718
User 552804
как при перетаскивании перекомпоновывать сам массив ссылок
Не очень понятен юзкейс
05:11:52 ПП
User 552804
User 60331718
Не очень понятен юзкейс
05:12:01 ПП
User 552804
вот визуализация всего дела
05:12:23 ПП
User 552804
надо перетаскивать ссылки-блоки вверх вниз
05:12:30 ПП
User 552804
чтобы менялась переменная links
05:12:38 ПП
User 552804
порядок ссылок чтобы в неё менялся
05:13:30 ПП
User 60331718
Ну ты можешь запоминать для каждого элемента его index в списке, а при вызове onAdd свопать с кем нибудь
05:13:41 ПП
User 60331718
Вообще список для таких вещей - плохо
05:13:44 ПП
User 60331718
Очень плохо
05:13:51 ПП
User 60331718
Используй map
05:13:57 ПП
User 60331718
Словарь всмвсле
05:14:07 ПП
User 552804
не очень понимаю
05:15:03 ПП
User 60331718
Ты присваиваешь каждой ссылке свой id и привязываешь его к элементу (этой вот draggable фигне)
05:15:57 ПП
User 60331718
Перед отправкой на сервер пробегаешься по этим элементам и пушишь линки в нужном порядке
05:16:03 ПП
User 60331718
Сами линки получаешь по id
05:16:07 ПП
User 60331718
Как-то так
05:16:24 ПП
User 60331718
Ибо insert для списка - это медленно
05:16:33 ПП
User 552804
ну у массива ж есть index у каждой ссылки
05:17:19 ПП
User 552804
вот я например перетаскиваю один блок на другое место
05:17:25 ПП
User 552804
как массив links это узнает?
05:17:35 ПП
User 552804
сори за туповатые вопросы
05:17:47 ПП
User 552804
надо колбэк функцией как то передать новый порядок?
05:19:11 ПП
User 60331718
но каждый раз, когда ты перетаскиваешь ссылку на 2 блока ниже, то что происходит с массивом:
взять i-й элемент, сдвинуть n - i - 2 эелмента на 1 позицию вправо, и инсертить этот элемент на позицию i + 2
05:23:46 ПП
User 60331718
кароч, у словаря операция вставки имеет сложность O(1) или O(log(n)) в зависимости от реализации (дерево или хеши), а у insert для листа имеет сложность O(n)
05:24:35 ПП
User 60331718
о, я придумал как оптимизировать еще
05:25:09 ПП
User 112715267
2 блока вниз
05:25:12 ПП
User 112715267
как же я проорал
05:25:19 ПП
User 552804
для меня это всё сложно звучит)) мне не важно какая там будет производительность, масштабы оч маленькие
05:25:24 ПП
User 112715267
Кто-то помнит прикол про кожевеников?
05:25:36 ПП
User 112715267
Кстати, Рафаэль, здравствуй, давно не виделись :D
05:25:37 ПП
User 152816933
User 552804
Сколько у тебя там таких перетаскиваемых блоков
05:25:47 ПП
User 552804
не больше 10
05:27:31 ПП
User 60331718
карочи:
1) у тебя есть словарь объектов:
:
id : {
    index: порядок элемента в списке
    link: ссылка
}

каждый элемент из списка хранит в себе только свой id
05:27:50 ПП
User 152816933
User 552804
не больше 10
ну тогда первое правило Кнута
05:28:30 ПП
05:28:33 ПП
User 60331718
а не, срань
05:28:42 ПП
User 552804
вот как у меня
05:29:32 ПП
User 552804
есть index по которому я могу перестроить
05:29:55 ПП
User 552804
https://github.com/SortableJS/Vue.Draggable
github.com/SortableJS/Vue.Draggable
Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js - SortableJS/Vue.Draggable
05:30:02 ПП
User 552804
во чо есть, надо присмотреться
05:37:46 ПП
User 552804
поделючил его, блоки таскаются, но почему то links не меняется, делал как в jsfiddle
05:39:49 ПП
User 552804
юхуу
05:41:17 ПП
User 112715267
посоветуйте кто-нибудь карусель, которую можно заюзать в рулетке
то есть нужно, чтобы крутилась бесконечно и через нужное время останавливалась на выбранном элементе
05:41:40 ПП
05:42:12 ПП
User 112715267
slick более-менее, но там косяк есть с прокруткой
05:42:28 ПП
User 152816933
Что значит на выбранном элементе? Как его выбрать, если оно бесконечно крутится?
05:42:36 ПП
User 112715267
черт, не так выразился
05:42:59 ПП
User 112715267
Короче, есть 10 игроков. Нужно, чтобы она крутилась секунд 5, допустим, и остановилась на нужном
05:43:18 ПП
User 112715267
бесконечная в том плане, что если доходит до конца слайдов, с начала крутить начинает
05:44:05 ПП
User 152816933
Я прям хз, не встречал такого)
05:45:43 ПП
User 112715267
я вообще с каруселями особо не работал, так чисто в лендингах простеньких
06:04:03 ПП
User 112715267
таки-шо, никто не знает?
06:06:25 ПП
User 133944225
Ну, нельзя взять обычную owl карусель
06:06:35 ПП
User 133944225
И заюзать Ее
06:06:52 ПП
User 133944225
На он чендж слайда проверять является ли слайд и пользователь смежными
06:07:05 ПП
User 133944225
Если да, тогда стопить, если нет - продолжать автопрокрутку
06:27:57 ПП
User 133750577
User 112715267
посоветуйте кто-нибудь карусель, которую можно заюзать в рулетке
то есть нужно, чтобы крутилась бесконечно и через нужное время останавливалась на выбранном элементе
Так тут же не нужно взаимодействий от юзера, а это самое важное в этих плагинах, кажется лишним их тащить. Правильнее было бы руками написать, не выглядит слишком сложным
06:28:45 ПП
User 133750577
Дублируешь эелемнты, меняешь трансформ транслейтХ
06:28:54 ПП
User 133750577
И как будто все