如何使用 vue.js 将单击图像的 rel 属性值传递给方法

Question

我正在学习 vue.js。我想将图像的 rel 属性的值传递给方法，但我无法做到这一点。

这是我的 html 代码：

<template>

    <div>

        <div class="row justify-content-center align-items-center">

            <img src="images/retro.jpg" class="card img-fluid" id="pc_left" rel="0">

            <img src="images/retro.jpg" class="card img-fluid" id="pc_center" rel="0">

            <img src="images/retro.jpg" class="card img-fluid" id="pc_right" rel="0">

        </div>

        <div class="row">

            <div class="col-3 d-flex justify-content-start">

                <img src="images/retro.jpg" class="card img-fluid" id="pack_cards" rel="0">

            </div>

            <div class="col-6 d-flex justify-content-center">

                <img src="images/retro.jpg" class="card img-fluid invisible" id="pc_game" rel="0">

                <img src="images/retro.jpg" class="card img-fluid invisible" id="player_game" rel="0">

            </div>

            <div class="col-3 d-flex justify-content-end">

                <img src="images/retro.jpg" class="card img-fluid" id="game_briscola" rel="0">

            </div>

        </div>

        <div class="row justify-content-center align-items-center">

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

            <img @click="play($event)" src="images/retro.jpg" class="card img-fluid" id="player_center" rel="6">

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

        </div>

    </div>

</template>

当我尝试提醒 id 或 src 时，一切正常...但是当我提醒 rel 时，会出现一个未定义的提醒（我应该看到一个数字）。开发者工具中没有出现任何错误。

有人可以帮忙吗？

Answer 1

您可以使用getAttributeevent.target.getAttribute("rel")