Vue 2 制作 div 可点击和图像

Question

我正在玩 Vue 2，我想让整个 div 都可以点击。此 div 有一个 link，图像和文本。

我将 router-link 用于页眉中的 link 和其他 link，但是当我尝试使用其他内容时，页面不断刷新。

谁能帮我解决这个问题..

干杯！

Answer 1

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

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

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

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

Answer 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

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

Vue 2 制作 div 可点击和图像

Vue 2 make a div Clickable and image

vue-component

vuejs2