CODEWITHSUNDEEP
vue.js
ILYASEM
ILYASEM

Reputation: 103

How to put one button inside another one in Vue?

I’m stuck with putting one button inside of another one: it’s prohibited, but I use bootstrap, that’s why I appoint class “btn …” to span and it looks like the button.

My button should look like this:

Filename.jpg <small delete button<

When you press on filename, file opens, when on small delete button - it sends request to API and deletes file

But now link is not working, but delete button does work. Putting and so one did not solve my problem

Code:

<span v-for=“link in links”
      class= “btn btn-success”
      v-bind:href=“<domain> + link.file”>

<button type=“button” class=“btn btn-danger” @click=“deleteFile(`$(link.file_id) `)”>-</button>

</span>

Upvotes: 0

Views: 254

Answers (2)

Kerunix
Kerunix

Reputation: 113

Generally speaking it is not a good idea to wrap clickable elements inside other clickable elements. It's bad for accessibility and tab navigation and it can lead to easy missclicks from your users.

The right thing to do would be to put your two buttons next to each others to indicate that there is in fact two separate actions your users can take related to the file.

Upvotes: 1

Ezon Zhao
Ezon Zhao

Reputation: 771

href only works on certain elements. Use <a> anchor instead of <span>.

Upvotes: 1

Related Questions