Vue 2 制作一个可点击的 div 和图像答案

【问题标题】：Vue 2 make a div Clickable and imageVue 2 制作一个可点击的 div 和图像
【发布时间】：2017-04-16 06:52:29
【问题描述】：

我正在玩 Vue 2，我想让整个 div 可点击。这个 div 有一个链接、图像和文本。

我使用路由器链接作为标题和其他链接中的链接，但是当我尝试使用其他内容时，页面不断刷新。

有人可以帮我解决这个问题吗..

干杯！

【问题讨论】：

你能添加相关代码或创建一个小提琴吗？

标签： vuejs2 vue-component

【解决方案1】：

为您添加点击事件<div>，您希望如下所示：

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

现在在你的方法属性中添加你想要在点击时触发的 clickMethod 回调，如下所示

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

【讨论】：

感谢您的帮助 :) 我很感激。既然我们在这里，我能再问你一个问题吗？如果我使用 Vuex State，浏览器中的客户端能否以某种方式访问 State 值，因为我想在那里传递一些“敏感”数据，但我不确定是否有人可以从控制台访问它的值，除非我使用 getter 传递值进入 DOM ？期待收到您或某人的来信:)
什么样的敏感数据？

【解决方案2】：

对于像我一样被困在这里的任何人，我在如何使 Div 可点击

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

脚本：

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

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

此事件将使 div 可点击。

希望我能帮助到某人 :) 并感谢 @user7814783

【讨论】：

如果 div 中有可点击的链接怎么办？我想让一个 div 可点击，但允许用户点击该 div 内的链接而不触发 div 本身的点击事件。

【解决方案3】：

对于那些想知道router.push 方法如何工作的人，以下是您可以使用该方法的各种方法：

// 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' } })

对我来说，这个实现效果最好：

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

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

【讨论】：