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

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

3988 members

Архив канала @vuejs_ru 6 октября 2016 г.

06:39:00 ДП
User 552804
подскажите, как отслеживать любое изменение в data: cart[] и при изменении вызывать метод (запись в localstorage)?
06:40:02 ДП
User 552804
watch: { cart: function(){... так?
06:40:10 ДП
User 58768789
this.$watch('cart', function(val){localStorage.setItem('cart', val)});
06:40:25 ДП
User 552804
благодарен :)
06:40:45 ДП
User 552804
версия 2.0 если что
06:40:57 ДП
User 58768789
Ну да, лучше через watch: {cart: ....
06:41:04 ДП
User 552804
ага, спасибо
06:46:24 ДП
User 552804
а как занести всё значение cart в localstorage?
06:46:34 ДП
User 552804
как массив
06:47:18 ДП
User 58768789
localStorage.setItem('cart', JSON.stringify(val))
06:47:25 ДП
User 58768789
Только в JSON
06:49:11 ДП
User 552804
точно, благодарю)
07:07:50 ДП
User 552804
туплю)
07:54:09 ДП
User 552804
deleteFromCart: function(item) {
  for (var i = 0; i < this.cart.length; i++) {
    if (this.cart[i].id === item.id) {
      Vue.delete(this.cart, i);
      break;
    }
  }
},
Такой метод, вешаю на кнопку удаления объекта из корзины, но чтото не удаляет
07:58:32 ДП
User 2526857
User 552804
deleteFromCart: function(item) {
  for (var i = 0; i < this.cart.length; i++) {
    if (this.cart[i].id === item.id) {
      Vue.delete(this.cart, i);
      break;
    }
  }
},
Такой метод, вешаю на кнопку удаления объекта из корзины, но чтото не удаляет
Я, конечно, не пишу на vue, но, судя по документации, Vue.delete удаляет свойство объекта, а не элемент массива.
07:59:18 ДП
User 58768789
User 2526857
Я, конечно, не пишу на vue, но, судя по документации, Vue.delete удаляет свойство объекта, а не элемент массива.
По идее индекс массива и есть ключ объекта
07:59:27 ДП
User 58768789
Но хз, не сталкивался
08:00:22 ДП
User 58768789
Object.keys([1,2,3,4])
//["0", "1", "2", "3"]
08:00:46 ДП
User 552804
а блин
08:00:46 ДП
User 58768789
User 552804
deleteFromCart: function(item) {
  for (var i = 0; i < this.cart.length; i++) {
    if (this.cart[i].id === item.id) {
      Vue.delete(this.cart, i);
      break;
    }
  }
},
Такой метод, вешаю на кнопку удаления объекта из корзины, но чтото не удаляет
ООо! Попробуй Vue.delete(this.cart, ''+i);
08:01:00 ДП
User 552804
не, понял походу косяк, щас сделаю
08:02:48 ДП
User 2526857
User 58768789
ООо! Попробуй Vue.delete(this.cart, ''+i);
А в чем прикол?
Кавычки, +i

Я просто не в теме, объясни плз)
08:03:32 ДП
User 58768789
Вот тут вывод ключей объекта (массива). Ключи в формате строк выводятся, так что мало ли
08:03:32 ДП
User 58768789
Object.keys([1,2,3,4])
//["0", "1", "2", "3"]
08:03:41 ДП
User 2526857
Не, я не про это
08:03:42 ДП
User 58768789
''+i преобразует i в строку
08:03:47 ДП
08:03:52 ДП
User 2526857
Понял, спасибо
08:03:59 ДП
User 58768789
Неявное преобразование в js
08:04:02 ДП
User 2526857
пустая строка + i
08:04:18 ДП
User 2526857
Просто стремно выглядит без пробелов)
08:04:55 ДП
User 58768789
5 + 4 = 9,
5 + '4' = 9,
'5' + 4 = '54'
08:05:21 ДП
08:05:46 ДП
User 104477
User 552804
deleteFromCart: function(item) {
  for (var i = 0; i < this.cart.length; i++) {
    if (this.cart[i].id === item.id) {
      Vue.delete(this.cart, i);
      break;
    }
  }
},
Такой метод, вешаю на кнопку удаления объекта из корзины, но чтото не удаляет
Splice уже не модный?
08:06:15 ДП
User 58768789
'5' - 4 = 1
08:06:25 ДП
User 58768789
Вот и разбирайся
08:06:35 ДП
User 58768789
User 104477
Splice уже не модный?
Ву так далеко не смотрит
08:06:47 ДП
User 58768789
Не заметит изменений
08:06:49 ДП
User 552804
сделал через Splice
08:06:53 ДП
User 2526857
Кстати, в доке написано, что второй аргумент в виде строки нужен
08:06:55 ДП
08:07:04 ДП
User 58768789
User 552804
сделал через Splice
Оно работает?
08:07:07 ДП
08:07:11 ДП
08:07:20 ДП
User 552804
for (var i = 0; i < this.cart.length; i++) {
            if (this.cart[i].id === item.id) {
              this.cart.splice(i,1)
              break;
            }
          }
08:07:42 ДП
User 58768789
В смысле изменение чекается сразу, все сразу перерендеривается?
08:07:48 ДП
08:08:20 ДП
User 58768789
User 104477
Splice уже не модный?
Видимо все же модный
08:09:29 ДП
User 58768789
Теперь вот мне интересно, как они реактивность реализовали. Рекурсивно в глубину чтоли?
08:09:59 ДП
User 552804
хз, я в этих реативностях не понимаю ничего)) и вообще в js
08:10:13 ДП
User 552804
просто надо тут корзину на сайт сделать, вот и мучаю vue
08:10:18 ДП
User 552804
на фронте
08:10:59 ДП
User 58768789
"Vue cannot detect property addition or deletion." - из гайда по вую 2
08:11:52 ДП
User 552804
что это значит для меня?)
08:21:26 ДП
User 58768789
По идее он не должен это детектить
09:06:18 ДП
User 105621481
Ну он не может отследить что-то вроде a.foo = 'fuck';
А стандартные методы массивов, push/splice/etc, вроде как, отслеживает.
09:52:17 ДП
User 552804
а как повесить транзишн на удаление строки из v-for?
09:52:28 ДП
User 552804
тj есть чтоб удалялось красивым схлопыванием
09:57:47 ДП
User 184398046
Есть же в доке много инфы http://vuejs.org/guide/transitions.html#List-Entering-Leaving-Transitions
10:09:02 ДП
User 552804
User 184398046
Есть же в доке много инфы http://vuejs.org/guide/transitions.html#List-Entering-Leaving-Transitions
спасибо, чтото упустил
10:14:03 ДП
User 552804
блин, всё равно траблы какие то
10:14:25 ДП
User 552804
у меня идет таблица, сначала идет thead, потом уже строки через v-for
10:14:44 ДП
User 552804
если обернуть в транзишен груп с тегом div или p то от встраивается до всей таблицы
10:14:56 ДП
User 552804
если всю таблицу обернуть то тогда сама таблица вообще не отрисовывается
10:24:59 ДП
User 552804
сделал через тег tbody
10:27:52 ДП
User 58768789
обернуть именно строки нужно. <transition-group><tr v-for="...">...</tr></trans...
10:29:24 ДП
User 552804
так и делаю
10:29:32 ДП
User 552804
<transition-group name="list" tag="tbody">
    <tr v-for="(item, index) in cart" :key="item" class="list-item">
10:29:37 ДП
User 552804
и так далее
10:30:03 ДП
User 552804
только пока сама транзакция не сработала, еще бьюсь
10:38:13 ДП
User 552804
<transition-group name="list" tag="tbody">
<tr v-for="(item, index) in cart" :key="item" class="list-item">
  <td>Текст</td>
</tr>
</transition-group>
И стили
.list-enter-active, .list-leave-active {
    transition: all 1s;
}
.list-enter, .list-leave-active {
    opacity: 0;
    transform: translateX(30px);
}
Чnо я делаю не так?
10:39:00 ДП
User 552804
кнопки удаления кстати находятся внутри v-for, просто тут их не показал
10:46:31 ДП
User 58768789
хз чет
10:51:11 ДП
User 552804
ну так на первый взгляд не видно ошибок?
10:51:21 ДП
10:51:24 ДП
User 58768789
Чет странное
10:51:40 ДП
User 552804
запилю куда нибудь в jsfiddle может кто нить поковыряет тоже))
11:01:24 ДП
User 552804
https://jsfiddle.net/t8pa5d7f/3/
jsfiddle.net/t8pa5d7f/3
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
11:01:28 ДП
User 552804
может кто нибудь подскажет
11:12:24 ДП
User 105621481
С таблицей не работает. Поменял на дивы - все ок, с анимацией.
11:12:58 ДП
User 105621481
И, кстати, в функцию удаления лучше передавать index, а не item. И тогда она будет выглядеть так:
    deleteFromCart: function(index) {
        this.cart.splice(index,1);
    }
11:14:42 ДП
User 184398046
и :key="item.name" key - должен быть примитивом
11:21:33 ДП
User 552804
понял, спасибы
11:24:44 ДП
User 552804
жаль что с таблицей не работает :(
11:24:57 ДП
User 552804
придется верстать дивами, может оно и к лучшему :)
11:25:07 ДП
User 552804
флексбоксами например
11:25:24 ДП
User 552804
ладно, это уже дело техники
11:25:30 ДП
User 184398046
с таблицей вприныппе transition: all 1s; не работает
11:57:40 ДП
User 94523403
не сталкивались ли:

Когда итерирую через v-for и рендерю <button></button> загрузка 300 кнопок занимает около 3 сек
при этом если просто рендерю текст этих кнопок , то моментально
01:07:30 ПП
User 94523403
как бороться с этим?
01:08:15 ПП
User 105621481
код шаблона может покажете?
01:09:47 ПП
User 94523403
извиняюсь, вот
          <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>
01:11:03 ПП
User 94523403
Если я выношу 
<% timeslot.begin_time | timeslotBeautify %>
за пределы кнопки(просто как текст) все шустро
01:12:18 ПП
User 105621481
<% timeslot.begin_time | timeslotBeautify %> - это текст серверным шаблонизатором подставляется?
01:12:29 ПП
User 94523403
это из модели тянется
01:12:34 ПП
User 94523403
если я правильно вас понял
01:13:32 ПП
User 105621481
Просто это не шаблон Vue, насколько я помню (если они во второй версии не добавили альтернативный синтаксис).
01:13:50 ПП
User 94523403
это первая версия, и этот кусок у меня обрамлен в <template>
01:18:36 ПП
User 105621481
<% %> - это какой-то другой шаблонизатор, не Vueшный. 

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

Верно?
01:20:00 ПП
User 94523403
аааа, да, сори

это ву, но мне пришлось переопределить делимитеры(привет handlebars). Считайте что это {{ }}
01:20:14 ПП
User 105621481
А, ясно.
01:21:11 ПП
User 94523403
я не понимаю, как кнопки могут так сильно замедлять загрузку
01:21:27 ПП
User 184398046
А если обработчики убрать?
@contextmenu.prevent="handleRightClick" @click="handleLeftClick"
01:21:41 ПП
User 94523403
User 184398046
А если обработчики убрать?
@contextmenu.prevent="handleRightClick" @click="handleLeftClick"
чуть быстрее, но проблема не решена остается
01:21:49 ПП
User 105621481
Это не кнопки, это фильтры, думаю. 
Уберите  | timeslotBeautify и, почти наверняка, все будет быстро
01:22:51 ПП
User 94523403
User 105621481
Это не кнопки, это фильтры, думаю. 
Уберите  | timeslotBeautify и, почти наверняка, все будет быстро
я выносил этот текст вне кнопки вместе с фильтром, и выдавалось моментально)
01:23:26 ПП
User 94523403
если убрать обработчики и стили, получается сносно по скорости

но неужели это обязательная мера, в этой ситуации?
01:23:32 ПП
User 105621481
Получается, что он у вас 300 раз там фильтрует текст. Возможно, как-то не оптимально фильтрует.
01:23:52 ПП
User 105621481
скиньте его код
01:24:51 ПП
User 184398046
Вообще нигде не рекомендуется столько обработчиков плодить - время и память жрут. Раз такой большой список, вынеси обработчики в родительский компонент
01:25:13 ПП
User 94523403
User 105621481
Получается, что он у вас 300 раз там фильтрует текст. Возможно, как-то не оптимально фильтрует.
 timeslotBeautify: function (value) {
            return moment(value).format('HH:mm')
        }
01:25:47 ПП
User 105621481
это у вас MomentJS там вызывается?
01:25:50 ПП
User 105621481
или как его..
01:26:26 ПП
01:26:57 ПП
User 105621481
Собственно, вот и ответ. 300 раз дергать какую-то библиотеку, которая еще, наверняка, ворочает регулярками - плохая идея :)
01:27:56 ПП
User 184398046
а как скорость замерялась?
01:28:13 ПП
User 94523403
User 184398046
а как скорость замерялась?
по личным ощущениям, и девтулз
01:28:52 ПП
User 94523403
пока пришел к выводу(убирая то одно, то другое), что обработчики, стили кнопки, и фильтр в равной степени режут скорость
01:29:57 ПП
User 184398046
У меня в проектах через момент и большее количество элементов рендерили, он тормозной, но на сильно больших коллекциях. Но всеже лучше обработать коллекцию до вставки в шаблон. Еще для 1 vue могу посоветовать ввставлять track-by и {{*
01:31:15 ПП
User 184398046
для id тоже
А то что из-за стилей тормозит - впервые слышу
01:31:18 ПП
User 94523403
там чуть меньше 500 кнопок оказалось, на странице

можете еще подсказать, куда гуглить, про вынесение хэндлеров нажатия в род. компонент
01:32:57 ПП
User 184398046
да на родительский элемент вынеси и через event.target смотри по id что заа элемент
01:33:43 ПП
User 94523403
 <button class="btn1 btn-8 btn-8g" >
                                    <% timeslot.begin_time %>
                                </button>
оставил вот так, все равно виснет сильно
01:34:00 ПП
User 94523403
что самое странное, лагает не только этот компонент, а весь сайт
01:34:30 ПП
User 94523403
например модал-окно из другого компонента(будучи в этой странице) открывается секунды 3 :)
01:35:05 ПП
User 94523403
хотя компонент с расписанием рендериться 1 раз за загрузку страницы, и потом ничего с ним не происходит
01:35:17 ПП
User 94523403
убираю кнопки, оставляю текст - весь сайт бегает ок
01:35:51 ПП
User 94523403
в общем ладно, спасибо всем за советы, видать не тривиальный случай, буду разбираться )