考虑下一个代码：
HTML生成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Ww1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current) </span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" onclick="getData();">Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
function getData() {
window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
}
</script>
</html>
还有我的代码段（我正在使用EJS）：
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('head'); -%>
</head>
<body>
<%- include('navbar'); -%>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" onclick="getData();">Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<%- include('scripts') -%>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
function getData() {
window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
}
</script>
</html>
我想做什么：
<div class="container-fluid" id="networdapp">中的<div v-for="result in results" class="col-sm-6" >内将执行n次，而我想要的是：我想单击随机生成的<div v-for="result in results" class="col-sm-6" >的“详细信息”按钮并获取来自{{ result.title }}（来自<div class="card-header text-center">）的数据，并将其存储到变量中，然后将其用于另一个x.ejs页面。到目前为止，我要做的就是读取所有所有div的内容，或者...变得不确定，就像将显示代码片段中的2x window.alert行代码一样（实际上是第二行，第一个不会显示任何内容）。这几乎是我的问题...我无法从{{result.title}}的v-for生成的随机div中读取<div v-for="result in results" class="col-sm-6" >的数据。我一直在尝试使用JQuery进行很多操作来解决此问题但无法弄清楚我在做什么错。
我正在使用EJS，Vue.JS，一些JQuery（我尝试读取数据）以及其他一些库，例如Axios。
提前谢谢！
答案 0 :(得分：2)
由于您使用的是Vue.js，因此不需要onclick，可以将其替换为@click并像参数一样传递result和$event： / p>
...
<a href="/details" class="btn btn-info" @click="getData(result,$event)">Details</a>
...
在您的方法内部按如下方式调用该函数：
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
methods:{
getData: function(result, event) {
// and do whatever you want with that result and event like
console.log(event.target.outerHTML);
// here your target is a anchor element (<a></a>) which you can access its attributes ..
}
}
...
}
您还可以删除该function getData(){...}