Vue 2는 클릭 가능과 이미지를 분할합니다.

Vue 2는 클릭 가능과 이미지를 분할합니다.

저는 Vue 2를 가지고 놀고 있는데, 모든 div를 클릭할 수 있게 만들고 싶습니다.이 div에는 링크, 이미지 및 텍스트가 있습니다.

헤더 및 기타 링크 링크에 router-link를 사용했는데 다른 것을 사용하려고 하면 페이지가 계속 새로 고쳐집니다.

누가 좀 도와주시겠어요?

건배!

클릭 이벤트 추가<div>클릭하면 다음과 같이 표시됩니다.

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

이제 메서드 속성에서 다음과 같이 클릭하면 호출할 메서드 콜백을 추가합니다.

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

나처럼 Div Clickable을 만들 때처럼 여기 갇힌 사람들을 위해

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

스크립트:

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

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

이 이벤트는 div Clickable이 됩니다.

제가 누군가를 도와드렸기를 바랍니다:) 그리고 @user7814783으로 보냅니다.

어떻게 하는지 궁금하신 분들을 위해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>

언급URL : https://stackoverflow.com/questions/43434586/vue-2-make-a-div-clickable-and-image