как предупредить идентификатор кликаемого элемента с vue js?

Question

Я пытаюсь понять, как работает vue.js. Я хотел бы предупредить идентификатор выбранного элемента, но когда я пытаюсь это сделать, ничего не происходит. Я не вижу предупреждение.

Это мой код:

<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. Может кто-нибудь помочь?

Answer 1

Используйте $event для захвата события и получения идентификатора:

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

...

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