Question

我正在编写Spring MVC应用程序，并且想在前端使用Vue。我正在尝试使用x模板来呈现我的组件，但是由于某些原因它无法正常工作，并且Vue devtools没有在页面上检测到任何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" %>

Answer 1

我没有设法找到解决问题的方法，但是我找到了一个可行的替代方法。 Vue.js还具有内联模板，其功能与x-templates相同。一种解决方案是放置以下标签：

<hotel></hotel>

具有inline-template属性。最终结果看起来像这样

<hotel inline-template></hotel>

Answer 2

您应该在标签之前而不是在头部区域加载vue.js。

这将允许您使用模板：将模板放在反引号（``）中-这样您就可以拥有多行模板，而不必将其构建为字符串。

Vue.js组件无法在jsp文件中工作

2 个答案: