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 complete 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>
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.com/profile_images/972154872261853184/RnOg6UyU_400x400.jpg" id="hasanStyle">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With