CODEWITHSUNDEEP
vuejs2vue-component
Marketingexpert
Marketingexpert

Reputation: 1461

Vue 2 make a div Clickable and image

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!

Upvotes: 6

Views: 22784

Answers (3)

Mark O Brian
Mark O Brian

Reputation: 11

For those wondering how router.push method works, below are various ways you can use the method:

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

For me this implementation worked best:

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

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

Upvotes: 0

Marketingexpert
Marketingexpert

Reputation: 1461

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

Upvotes: 5

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

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
  }
}:

Upvotes: 13

Related Questions