Вернее, не вместо, а вдобавок, если нужно именно на правую кнопку особый функционал повесить, а не меню выключить вообще

тогда нажатие левой не будет ловить ведь?

предлагаете 2 хэнлдера на каждый элемент?

подумал что это не хорошо, делить логику

Да, конечно.

потому что в зависимости от стейта кнопки разные действия происходят при разных нажатиях

Это не деление логики, это обработка разных событий

хорошо, я перепишу, спасибо

подскажите, как отслеживать любое изменение в data: cart[] и при изменении вызывать метод (запись в localstorage)?

watch: { cart: function(){... так?

this.$watch('cart', function(val){localStorage.setItem('cart', val)});

благодарен :)

версия 2.0 если что

Ну да, лучше через watch: {cart: ....

ага, спасибо

а как занести всё значение cart в localstorage?

как массив

localStorage.setItem('cart', JSON.stringify(val))

Только в JSON

точно, благодарю)

туплю)

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; } } }, Такой метод, вешаю на кнопку удаления объекта из корзины, но чтото не удаляет

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 удаляет свойство объекта, а не элемент массива.

Я, конечно, не пишу на vue, но, судя по документации, Vue.delete удаляет свойство объекта, а не элемент массива.

По идее индекс массива и есть ключ объекта

Но хз, не сталкивался

Object.keys([1,2,3,4]) //["0", "1", "2", "3"]

а блин

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);

не, понял походу косяк, щас сделаю

ООо! Попробуй Vue.delete(this.cart, ''+i);

А в чем прикол? Кавычки, +i Я просто не в теме, объясни плз)

Вот тут вывод ключей объекта (массива). Ключи в формате строк выводятся, так что мало ли

Object.keys([1,2,3,4]) //["0", "1", "2", "3"]

Не, я не про это

''+i преобразует i в строку

А

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

Неявное преобразование в js

пустая строка + i

Просто стремно выглядит без пробелов)

5 + 4 = 9, 5 + '4' = 9, '5' + 4 = '54'

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 уже не модный?

'5' - 4 = 1

Вот и разбирайся

Splice уже не модный?

Ву так далеко не смотрит

Не заметит изменений

сделал через Splice

Кстати, в доке написано, что второй аргумент в виде строки нужен

О_О

сделал через Splice

Оно работает?

да

О_О

for (var i = 0; i < this.cart.length; i++) { if (this.cart[i].id === item.id) { this.cart.splice(i,1) break; } }

В смысле изменение чекается сразу, все сразу перерендеривается?

да

Splice уже не модный?

Видимо все же модный

Теперь вот мне интересно, как они реактивность реализовали. Рекурсивно в глубину чтоли?

хз, я в этих реативностях не понимаю ничего)) и вообще в js

просто надо тут корзину на сайт сделать, вот и мучаю vue

на фронте

"Vue cannot detect property addition or deletion." - из гайда по вую 2

что это значит для меня?)

По идее он не должен это детектить

Ну он не может отследить что-то вроде a.foo = 'fuck'; А стандартные методы массивов, push/splice/etc, вроде как, отслеживает.

а как повесить транзишн на удаление строки из v-for?

ERROR: S client not available

тj есть чтоб удалялось красивым схлопыванием

Есть же в доке много инфы http://vuejs.org/guide/transitions.html#List-Entering-Leaving-Transitions

Есть же в доке много инфы http://vuejs.org/guide/transitions.html#List-Entering-Leaving-Transitions

спасибо, чтото упустил

блин, всё равно траблы какие то

у меня идет таблица, сначала идет thead, потом уже строки через v-for

если обернуть в транзишен груп с тегом div или p то от встраивается до всей таблицы

если всю таблицу обернуть то тогда сама таблица вообще не отрисовывается

сделал через тег tbody

обернуть именно строки нужно. <transition-group><tr v-for="...">...</tr></trans...

так и делаю

<transition-group name="list" tag="tbody"> <tr v-for="(item, index) in cart" :key="item" class="list-item">

и так далее

только пока сама транзакция не сработала, еще бьюсь

<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о я делаю не так?

кнопки удаления кстати находятся внутри v-for, просто тут их не показал

хз чет

ну так на первый взгляд не видно ошибок?

неа

Чет странное

запилю куда нибудь в jsfiddle может кто нить поковыряет тоже))

https://jsfiddle.net/t8pa5d7f/3/

может кто нибудь подскажет

С таблицей не работает. Поменял на дивы - все ок, с анимацией.

И, кстати, в функцию удаления лучше передавать index, а не item. И тогда она будет выглядеть так: deleteFromCart: function(index) { this.cart.splice(index,1); }

и :key="item.name" key - должен быть примитивом

понял, спасибы

жаль что с таблицей не работает :(

придется верстать дивами, может оно и к лучшему :)

флексбоксами например

ладно, это уже дело техники

с таблицей вприныппе transition: all 1s; не работает