vue js를 사용하여 클릭한 요소의 경고 ID를 선택하십시오.

vue js를 사용하여 클릭한 요소의 경고 ID를 선택하십시오.

나는 어떻게 하는지 이해하려고 노력하고 있다.vue.js클릭된 요소의 ID를 알려주고 싶지만, 그렇게 하려고 하면 아무 일도 일어나지 않는다.경보가 안 보여.

이건 내 암호야

<template>
    <div>
        <div class="row">
            <img src="images/retro.jpg" class="card img-fluid" id="pc_left">
            <img src="images/retro.jpg" class="card img-fluid" id="pc_center">
            <img src="images/retro.jpg" class="card img-fluid" id="pc_right">
        </div>
        <div class="row">
            <img src="images/retro.jpg" class="card img-fluid" id="player_left" rel="0">
            <img src="images/retro.jpg" class="card img-fluid" id="player_center" rel="0">
            <img @click="change(this.id)" src="images/retro.jpg" class="card img-fluid" id="player_right" rel="5">
        </div>
        {{ cards[3] || '5' }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            cards: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'],
        }
    },
    methods: {
        change(id) {
            alert(id);
        }
    }
}
</script>

<style scoped>
.card {
    border-radius: 10%;
}
</style>

개발자 도구에서 다음 오류를 수신함:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of null"

found in

---> <Card> at resources/js/components/Card.vue
       <Root>

TypeError: Cannot read property 'id' of null
    at click (app.js:37977)
    at invokeWithErrorHandling (app.js:39987)
    at HTMLImageElement.invoker (app.js:40312)
    at HTMLImageElement.original._wrapper (app.js:45671)

문제가 전달된 매개 변수라고 생각한다.this.id누가 좀 도와줄래?

사용하다$event이벤트를 캡처하고 ID를 얻으려면:

<img @click="change($event)" src="images/retro.jpg" class="card img-fluid" id="player_right" rel="5">

...

  methods: {
      change(event) {
          alert(event.target.id);
      }
  }

참조URL: https://stackoverflow.com/questions/61128453/how-alert-id-of-clicked-element-with-vue-js