Учитывая следующий код:
Сгенерировано 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}} из случайного div, сгенерированного этим v-for из <div v-for="result in results" class="col-sm-6" >. Я много чего пробовал с JQuery, чтобы решить эту проблему, но не могу понять, что я делаю неправильно.
Я использую EJS, Vue.JS, немного JQuery (мои попытки чтения данных) и некоторые другие библиотеки, такие как Axios.
Заранее спасибо!