How to put one button inside another one in Vue?-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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.