在 Vuejs 中使图片可点击答案

【问题标题】：Making a picture clickable in Vuejs在 Vuejs 中使图片可点击
【发布时间】：2019-03-27 20:56:09
【问题描述】：

我有一张想要点击的图片。我都试过了

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

和

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

但都没有用！最好的方法是什么？

完整代码如下：

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

【问题讨论】：

你需要this.showHasan = false
您的代码看起来不错；是什么让您认为它不起作用？
你想通过点击隐藏和显示图片吗？

标签： javascript html image vue.js

【解决方案1】：

你试过了吗：

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

myMethod 当然应该是一个方法

【讨论】：

【解决方案2】：

不知道你有没有试过：

首先有问题->

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

上面的代码应该是：

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

其次，当您使用myMethod 时，请尝试使用console.log 或alert，这将确认您的方法适用于图像或div。

或者看看 jsfiddle 代码：

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/vue@2.5.17/dist/vue.js"></script>

【讨论】：