Framework7-Vue swipeout vue component

Questions
1

Is there any method or prop that I can use to open swipeout?
I want to open swipeout when user click the list item.

2

hi @enylin,

i didnt try, but reading the doc;

app.swipeout.open(el, side, callback) - reveal swipeout actions on specified element

el - HTMLElement or string (with CSS Selector) of list (

  • ) element with “swipeout” class. Required
    side - string (could be “left” or “right”) swipeout actions to open. Should be specified if item has both left and right swipeout actions. Optional
    callback - function - callback function will be executed after swipeout element completes its opening animation
    you can make a function to open the swipeout when the user click the list itme 
    • ...
< li class='list-item' @click='openSwipeout'>my list item</li>
...

    ...
openSwipeout() {
  this.$f7.swipeout.open(el, side, callback)
}
...
    1 Like
    3

    I was expecting that I can control the list-item open/close by passing different values into props like sheet-model, action sheet.
    But it seems that this is the only way.
    Thank you :slight_smile:

    4

    i dont understand what you need, sry english its no my language.
    you need like a dynamic swipeout?

    5

    I don’t want to set an id or class on component, so I need a vue component prop for list-item which can control swipeout (open/close).

    For example,
    http://framework7.io/vue/action-sheet.html
    The prop ‘opened’ allow users to open/close Action Sheet

    and
    http://framework7.io/vue/sheet-modal.html
    There is also a prop called ‘opened’ which allows users to open/close Action Sheet.

    6

    ok still dont understand fully what you need.
    but you can add a v-if=‘opened’ to the vue-component where you have your swipeout, then just add an event listener and emit that event to change what you need.

    1 Like
    7

    It can’t be changed by prop at the moment, only using API