Swipeout, delete, data-confirm

1

Hi everyone, I am thinking how can you call a function after the data-confirm is confirmed by the user? I cant figure it out and I am almoast hopeless. Can someone give me a tip or something, maybe some explanation? Thanks in advance!

I am talking about the same code that is used in the docs, as showed below. Everything is working fine, except for that I can not execute a function after the “data-confirm” is confirmed by the user.

<div class="list">
  <ul>
    <li class="swipeout">
      <div class="item-content swipeout-content">
        <div class="item-media"><i class="icon icon-f7"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Swipe left on me please</div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="item-content swipeout-content">
        <div class="item-media"> <i class="icon icon-f7"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Swipe left on me too</div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media">
          <i class="icon icon-f7"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">I am not removable</div>
        </div>
      </div>
    </li>
  </ul>
</div>
2

After confirmation it will delete the swipeout item, so you need to listen for swipeout:delete event and put your logic there.

1 Like
3

Thanks for the tip, it worked for me know!

4

For the developers who may get stuck as me in future, see my solution code below:

HTML

 <div class="block-title">With callback on remove</div>
          <div class="list">
            <ul>
              <li class="swipeout" @swipeout:deleted="onDeleted">
                <div class="item-content swipeout-content">
                  <div class="item-inner">
                    <div class="item-title">Swipe left on me please</div>
                  </div>
                </div>
                <div class="swipeout-actions-right">
                  <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
                </div>
              </li>
            </ul>
          </div>

Take the swipeout with callback on delete from kitchen-sink code as i am implementing this in an template page. See code above.

And add a script tag under the template element with the following Javascript code which is also taken from kitchen-sink.

 <script>
    return {
      methods: {
        onDeleted: function () {
          var app = this.$app;
          app.dialog.alert('Thanks, item removed!');
        },
      },
    }
  </script>
5

Thank you my friend for the help you have given. It worked

[image]

1 Like