Prevent Button Propagation

Steve Winter:
I have a button, in a slot, in a table which has the following

<button class="btn btn-primary" @click="namedAction('fileDownload', {fileId: props.row.fileID});">Download
</button>

At present the named action does

var id = action.options.fileId;
[console.info](http://console.info)(id);
return false;

Clicking the button displays the ID in the console (great) but it also modifies the URL and reloads the page (it inserts a ? between the trailing slash of the domain name and the # of the URL.
What am I missing here? I’m sure this has worked previously?


Andrew Dam:
I ran into this as well and you can resolve this by adding .prevent on the @click event.

<button class="btn btn-primary" @click.prevent="namedAction('fileDownload', {fileId: props.row.fileID});">Download
</button>

Steve Winter:
Thanks @Andrew Dam that has indeed solved things - something for the docs :slightly_smiling_face:


Steve Winter:
(a good search term to include in the docs for this entry would be ‘propagate’ or ‘propagation’ since I searched for both of those and got nothing)


Andrew Dam:
This is technically a Vue behaviour, which you can find documentation on here for example. But for future travelers, I will definitely archive this on the forum.