trouble with Vue.js in Spring MVC jsp pages

Question

I am trying to add view to my jsp files, I am using the cdn to add view to my spring mvc app. I have a very basic setup and for whatever reason the msg attribute that I have added on the data object just shows as {{ msg }} instead of the actual message.

header.jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <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>
        <script src="./js/main.js"></script>
    </head>
    <body> 
        <div id="app">
            <div class="container">

index.jsp:

<%@include file = "header.jsp" %>
    <div class="jumbotron">
        <h1>This is an example</h1>
        {{ msg }}
    </div>
        <a href="./reviews">reviews</a>
        <a href="./hotel_requests">hotel requests</a>
<%@include file = "footer.jsp" %>

footer.jsp:

            </div>  
        </div>
    </body>
</html>

main.js:

let app = new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue!'
    }
})

this is all being done as part of a spring mvc app. I have been online trying to find solutions but it doesn't seem like there are none.... or the scenario doesn't apply to me. I am using Apache tomcat version 9, just in case the server has something to do with it.

Christopher · Accepted Answer · 2018-11-24 13:50:54Z

1

The problem was that the script tag that referenced my external JavaScript file was supposed to be put at the bottom of the document. More specifically right before the end tag of the body (). It somehow made a difference...

answered Nov 24, 2018 at 13:50

Christopher

3151 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

trouble with Vue.js in Spring MVC jsp pages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related