Make whole div clickable

I'm using the bootstrap thumbnail styles on a Vue app, and rather than having the buttons, I'd like to make the whole column clickable. I've tried adding v-on:click and then catching the event in the handler, but the returned target is the child element that is clicked.

Ideally, I don't want to add the url to every child element. Does anybody have an example of how I should do this?

Example of the HTML:

  <div class="col-sm-6 col-md-4" v-on:click.prevent="openLink">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
      </div>
    </div>
  </div>

MikeHopley

10 years ago

Best Answer

Level 17

Why do you need Vue for this? You can do it with just HTML and a touch of CSS:

  <a class="col-sm-6 col-md-4 block-link" href="/your/link/here">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
      </div>
    </div>
  </a>

.block-link {
    display: block;
}

1 like

James

10 years ago

Level 1

Ah thanks. I misread https://vuejs.org/guide/components.html#Template-Parsing to mean that I couldn't include things like divs inside of an anchor tag when using a template.

MikeHopley

10 years ago

Level 17

No problem, glad it worked. :)

You couldn't include a button inside the a tag, for example. That would be a clickable thing inside another clickable thing, and the browser wouldn't know what to do when the button was clicked (do I activate the button? Do I follow the link?). Hence that would be invalid HTML.

Also, block links like my example used to be invalid before HTML5.

dezihax

5 years ago

Level 1

i lvoe this

Please or to participate in this conversation.