Vue.js components are not working in jsp files
-1
I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
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" %>
javascript spring-mvc jsp tomcat vue.js
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
add a comment |
-1
I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
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" %>
javascript spring-mvc jsp tomcat vue.js
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
add a comment |
-1
-1
-1
I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
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" %>
javascript spring-mvc jsp tomcat vue.js
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
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" %>
javascript spring-mvc jsp tomcat vue.js
javascript spring-mvc jsp tomcat vue.js
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
asked Nov 25 '18 at 17:43
ChristopherChristopher
356
356
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470181%2fvue-js-components-are-not-working-in-jsp-files%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
add a comment |
0
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
add a comment |
0
0
0
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
answered Nov 26 '18 at 23:23
ChristopherChristopher
356
356
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470181%2fvue-js-components-are-not-working-in-jsp-files%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
