Button shows after delete

[emerg]

Thank you for such a great component. I have a slight issue, and I was not able to see anything regarding this in the docs. When I swipe to reveal the actions, one of my actions is to delete that item from the array. When I delete the item, the next item below now already has the buttons/actions revealed for it, without swiping. I would like only for the delete button to be shown when an item is swiped on. Thank you for the help.

[nanov]

Hi!

Are you using the SwipeList or the SwipeOut component?

If using SwipeList are you setting a transition-key attribute? (some sort of unique attribute/value in the item).

When that attributed is not supplied the component uses the array index as key, and when removing some item the next one gets its index and therefore its state.

For example the objects in your array are in the following format :

{
  id: 124566,
  title: 'harum...',
  timestamp: 2357794,
  // ...
}

You should supply id ( string, ie. the property name not value ) as transition-key.

[emerg]

I'm using the SwipeList component. The objects being passed do not have an id, because they are not actual DB objects, but rather just items in an array that is being stored in the cart. I thought perhaps it would be best to use "index" in the transition-key attribute, but that doesn't seem to work for it either, because of what you said, the next item gets the same index once something is removed, and therefore the same state.

[nanov]

An item may have an id regardless of its origin ( ids are not only db generated ).

The transition-key property is a sugar for vue's key property.

One thing you could do is to generate an id when generating the item ( an uuid/v4 for example, or simply keep an last id in some sort of state and increment ). In other words, depending on your carts logic either in a vuex action/mutation or whenever the item is added to your cart.

[emerg]

Thank you for the help Dimitar. Yes I went ahead and tried generating an ID on the creation of the cart objects so that I could then pass that into the transition-key property, and it is working as expected. Thank you for you help and for putting together a great vue component!

[emerg]

Actually, still having this issue, even though passing in a unique ID now. The difference is that the issue is reversed. instead of it happening to an item below, it now happens to the item above. Is there there any function I can call to simply re-initialize the SwipeList component?

[nanov]

That is rather strange. I will take a look now to see what exactly happens. A gist/repository reproducing the problem would come in great help.

EDIT:

Just to answer your question, the SwipeList component is just sugar for listing many SwipeOut-s, hence it it has no such methods. The SwipeOut component on the other hand does has revealRight, revealLeft and close methods that are passed in the slots scope. They aren't passed into the actions slots where those could be useful in your case, I will add those into those slots also.

With that being said, in your case this would be a hack-fix, as the situation shouldn't happen in first place. I will investigate now why and when this happens.

[nanov]

I am sorry but I cannot reproduce the problem, are you sure your ids are unique? Are your sure your are passing the right key name ( a limitation is that the property cannot be nested, ie. meta.id won't work but id would ) ?

I've just made a release which has the close method passed to action slots as well, additionally I've updated the demo to show a situation like yours ( removing an item trough the actions ).

For more assistance i would need a test case reproducing the problem.