Vue.js 组件在 jsp 文件中不起作用答案

【问题标题】：Vue.js components are not working in jsp filesVue.js 组件在 jsp 文件中不起作用
【发布时间】：2019-04-27 10:52:11
【问题描述】：

我正在编写一个 Spring MVC 应用程序，我想将 Vue 用于我的前端。我正在尝试使用 x-templates 来呈现我的组件，但由于某种原因它不起作用，并且 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">

页脚.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

【解决方案1】：

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

<hotel></hotel>

带有 inline-template 属性。最终结果应该是这样的

<hotel inline-template></hotel>

【讨论】：

【解决方案2】：

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

这将允许您使用模板：使用反引号 (``) 中的模板 - 这样您就可以拥有一个多行模板，而无需将其构建为字符串。

【讨论】：