close triggers page reload

[kermorgant]

Hi,

clicking on the close button trigger page reload (perhaps because I have a form in my template).

Would be nice to prevent submit on the click (I do it in the action). IIRC, it should be possible by replacing @click by @click.prevent

[AlbinoDrought]

Hey,

Are you able to post an example here (possibly the full component file)? I am not able to reproduce this.

Here is a component I tried:

<template>
  <div>
    <modal :showModal="visible" :closeAction="toggle">
      <form slot="body" action="http://example.com">
        <input type="text">
        <input type="submit">
      </form>
    </modal>
    <button type="btn btn-default" @click="toggle">Show</button>
  </div>
</template>

<script>
import Modal from 'modal-vue';

export default {
  components: {
    Modal,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
  },
};
</script>

My results:

Clicking the "submit" button sends the browser to the action url, as expected. Clicking the close button performs the closeAction and does not invoke submit, as expected.

Above behaviour also remains the same when no closeAction is specified.