如何将点击图像的 rel 属性值传递给 vue.js 的方法答案

【问题标题】：how pass rel attribute value of a clicked image to method with vue.js如何将点击图像的 rel 属性值传递给 vue.js 的方法
【发布时间】：2020-07-24 06:35:23
【问题描述】：

我正在学习 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>

这是我的js函数：

play(event) {
            var target_id = "#" + event.target.id;
            alert(event.target.rel); //here not working
            var src_image = this.num_to_src(event.target.rel);
            $(target_id).addClass("invisible").removeClass("visible");
            $("#player_game").addClass("visible").removeClass("invisible");
            $("#player_game").attr("src", src_image);
            $("#player_game").attr("rel", event.target.rel);
        }

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

有人可以帮忙吗？

【问题讨论】：

您实际上并没有通过 Vue 对 rel 属性进行任何数据绑定。您只是在使用 jQuery 操作 DOM，这不会触发 Vue 反应性。
用 vue.js 编程是不是不好？
"Bad" 是主观的，但根据我的经验，没有理由将 jQuery 与 Vue.js 或 React 等框架结合使用。 jQuery 和现代前端 JS 框架采用截然不同的方法来更新 DOM。

标签： javascript jquery html vue.js

【解决方案1】：

您可以使用getAttribute

event.target.getAttribute("rel")

【讨论】：