Vue 2 make a div Clickable and image

Question

I am playing around with Vue 2, and I want to make a whole div clickable. This div have a link, image and text.

I used router-link for links in header and other links but when I try to use something else the page keeps refreshing.

Can someone please help me get over this somehow..

Cheers!

Answer 1

Add click event to you <div> that you want to be clickable as below:

<div @click="clickMethod"></div>

Now in your methods property add rhe clickMethod callback that you want to fire when clicked like below

methods: {
    clickMethod() {
        //add code that you wish to happen on click
  }
}:

Answer 2

For anyone who is stuck here like I did on how to make a Div Clickable

<div @click="clickeMethod">
<p> Some Text Here </p>
</div>

script:

<script>
export default {
  name: 'headers',
  data() {
    return {

    };
  },
  methods: {
    clickMethod() {
      this.$router.push('home');
    },
  },
};
</script>

This Event will make a div Clickable.

Hope I helped someone :) and thnx to @user7814783