I have a picture that I want to be clickable. I tried both

<img @click="myMethod" src="hasan.jpg"> 

and

<div @click="myMethod">
   <img src="hasan.jpg">
</div>

but neither worked! What's the best way to do it?

Here is the plete code:

<template>
  <div @click="myMethod">
   <img src="hasan.jpg" id="hasanStyle">
  </div>
</template>

<script>
export default{
  data(){
    return{
      showHasan:true
    }
  },
  methods:{
    myMethod(){
      showHasan = false
    }
  }
}
</script>

<style scoped>
  #hasanStyle{
    position: absolute;
    top: 120px;
    right: -323px;
  }
</style>

I have a picture that I want to be clickable. I tried both

<img @click="myMethod" src="hasan.jpg"> 

and

<div @click="myMethod">
   <img src="hasan.jpg">
</div>

but neither worked! What's the best way to do it?

Here is the plete code:

<template>
  <div @click="myMethod">
   <img src="hasan.jpg" id="hasanStyle">
  </div>
</template>

<script>
export default{
  data(){
    return{
      showHasan:true
    }
  },
  methods:{
    myMethod(){
      showHasan = false
    }
  }
}
</script>

<style scoped>
  #hasanStyle{
    position: absolute;
    top: 120px;
    right: -323px;
  }
</style>

• javascript
• html
• image
• vue.js

• 2 You need this.showHasan = false – Roy J Commented Oct 23, 2018 at 15:04
• 1 your code looks okay; what makes you think it's not working? – Stephen Thomas Commented Oct 23, 2018 at 15:09
• are you trying to hide and show image by click ? – Mandeep Gill Commented Oct 23, 2018 at 15:32

2 Answers 2

Don't know if you tried this :

First there is problem ->

methods:{
    myMethod(){
      showHasan = false
    }
  }

Above code should be :

    methods:{
        myMethod(){
          // because you are accessing data property of vue instance and 
// every vue instance make the proxy of data object as a root.
          this.showHasan = false
        }
      }

Second when you use myMethod try to use console.log or alert that will confirm you your method is working on image or div.

or Have a look jsfiddle code :

new Vue({
  el: "#app",
  data: {
	  showHasan: true
  },
  methods: {
  	myMethod () {	
    	this.showHasan = false
    }
  }
})

<div id="app">
   <div @click="myMethod">
     <img v-if="showHasan" src="https://pbs.twimg./profile_images/972154872261853184/RnOg6UyU_400x400.jpg" id="hasanStyle">
  </div>
</div>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>

Have you tried:

<div onClick="myMethod()">
   <img src="hasan.jpg" id="hasanStyle">
</div>

myMethod should be a method of course