Я пишу весеннее MVC-приложение и хочу использовать Vue для моего интерфейса.Я пытаюсь использовать x-шаблоны для рендеринга моих компонентов, но по какой-то причине это не работает, и разработчики Vue не обнаруживают никаких Vue.js на странице.Мне удалось заставить Vue.js работать с моим файлом index.jsp, но он не работает для моих отелей, файл jsp.
main.js:
let getJsonData = (url)=>{
let result = [];
$.getJSON(url, (data)=>{
data.forEach((x)=>{
result.push(x);
});
})
return result;
};
Vue.component('hotel', {
template: '#hotel-template',
data:function(){
return {
msg:'Yoshi'
}
}
})
let app = new Vue({
el:'#app',
data:{
navLinks:[
{
name:'login',
path:'/login'
},
{
name:'sign up',
path:''
}
],
countries:[],
allHotels:getJsonData('./hotels'),
}
})
header.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="/css/main.css" rel="stylesheet"/>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="nav">
<li class="nav-item" v-for="link in navLinks">
<a class="nav-link" v-bind:href="link.path">{{link.name}}</a>
</li>
</ul>
<div class="container">
footer.jsp:
</div>
</div>
</body>
<script src="/js/main.js"></script>
</html>
index.jsp:
<%@include file = "header.jsp" %>
<header class="jumbotron">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="display-1">Bon voyage!</h1>
<p> Dear <strong>${user}</strong>, Welcome to ${user} Page.
<a href="./logout">Logout</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<select id="country_select">
<option>Choose country</option>
</select>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</header> <!--end of jumbotron -->
<main>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel name</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel Country</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel City</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel address</h4>
</div>
</div>
<hr>
<div v-for="hotel in allHotels" class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<a v-bind:href='"./hotel/" + hotel.id'>{{ hotel.name }}</a>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.country }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.city }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.address }}
</div>
</div>
</main>
<!-- <a href="./reviews">reviews</a>
<a href="./hotel_requests">hotel requests</a>
<a href="./hotels">hotels</a>-->
<%@include file = "footer.jsp" %>
hotels.jsp:
<%@include file = "header.jsp" %>
<script type="text/x-template" id="#hotel-template">
<header>
<h1>{{ msg }}</h1>
</header>
</script>
<%@include file = "footer.jsp" %>