javascript - Uncaught ReferenceError : Vue is not defined at room. js:109

标签 javascript html css vue.js

这些代码在 webstrom 上运行，google 上的结果有一个错误，说 Uncaught ReferenceError: Vue is not defined at room.js:109, 并且它还说 Vue.component("room", is uncaught referenceError并且 due 没有定义，但我不知道为什么，因为我有 import vue !!

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>room</title>
    <link href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css ">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="room.js"></script>
    <script type="text/css" src="room.css"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col_edit">
                <h1>飯店資料</h1>
                <hr/>
                <label>折價</label>
                <input class="form-control" v-model="discount"/>
                <label>服務費</label>
                <input class="form-control" v-model="service_fee"/>
                <h1>房間編輯</h1>
                <select class="form-control" v-model="edit_id">
                    <option v-for="(r ,id) in rooms" :value="id">{{r.name}}</option>
                </select>
                <button class="btn btn-secondary room_edit" @click="addroom">+ 新增房間 </button>
                <hr/>
                <div class="room_edit" v-for="(room,id) in [rooms[edit_id]]">
                    <h4> {{room.name}}</h4>
                    <label>房間名稱<i class="fa fa-trash cursor_pointer" @click="delete_room(edit_id)"></i></label>
                    <input class="form-control" v-model="room.name"/>
                    <label>價錢</label>
                    <input class="form-control" v-model="room.price"/>
                    <label>折價</label>
                    <input class="form-control" v-model="room.discount"/>
                    <label>英文</label>
                    <input class="form-control" v-model="room.eng"/>
                    <label>圖片網址</label>
                    <input class="form-control" v-model="room.cover"/>
                    <label>房間設備</label>
                    <label>早餐
                        <input class="form-control" type="checkbox" v-model="room.equipment.breakfast"/>
                    </label>
                    <label>wifi
                        <input class="form-control" type="checkbox" v-model="room.equipment.wifi"/>
                    </label>
                    <label>浴缸
                        <input class="form-control" type="checkbox" v-model="room.equipment.bathtub"/>
                    </label>
                </div>
            </div>
            <div class="col-sm-9 col-rooms">
                <h1>房間列表</h1>
                <hr/>
                <div class="row">
                    <div class="col-sm-4 col_room" v-for="(room,id)  in rooms">
                        <room v-bind:room_data="room" v-bind:hotel_discount="discount" v-bind:hotel_fee="service_fee" v-bind:delete_room="delete_room" id="id"></room>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<template id="room">
    <div class="room_container">
        <div class="cover" v-bind:style="bg_css">
            <h3>{{ room_data.name }}</h3><i class="fa fa-times" @click="delete_room(id)"></i>
        </div>
        <div class="info">
            <h5>{{ room_data.eng }}
                <div class="icons"><span v-if="room_data.equipment.breakfast"><i class="fa fa-coffee"></i></span><span v-if="room_data.equipment.bathtub"><i class="fa fa-bath"></i></span><span v-if="room_data.equipment.wifi"><i class="fa fa-wifi"></i></span></div>
            </h5>
            <h5> {{room_data.discount}} * {{ hotel_discount}} = {{ final_discount_show }} 折</h5>
            <p>{{final_price}}</p>
            <h4>TWD
                <s>{{room_data.price}}</s>
                <div class="final_price">{{final_price}}</div>
            </h4>
        </div>
    </div>
</template>





</body>
</html>

JavaScript:




 var rooms = [
    {
        "name": "經濟雙人房",
        "eng": "Economy Double Room",
        "price": 7000,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(1).jpg",
        "discount": 0.9,
        "equipment": {
            "wifi": false,
            "bathtub": true,
            "breakfast": true
        }
    },
    {
        "name": "海景三人房",
        "eng": "Sea view triple Room",
        "price": 7800,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(2).jpg",
        "discount": 0.8,
        "equipment": {
            "wifi": true,
            "bathtub": true,
            "breakfast": false
        }
    },
    {
        "name": "典雅景觀房",
        "eng": "Elegant landscape Room",
        "price": 5400,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(3).jpg",
        "discount": 0.85,
        "equipment": {
            "wifi": false,
            "bathtub": true,
            "breakfast": true
        }
    },
    {
        "name": "尊享豪華房",
        "eng": "Exclusive Deluxe Room",
        "price": 9800,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room%20(4).jpg",
        "discount": 0.8,
        "equipment": {
            "wifi": true,
            "bathtub": false,
            "breakfast": true
        }
    },
    {
        "name": "商務雙人房",
        "eng": "Business Double Room",
        "price": 5600,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (5).jpg",
        "discount": 0.9,
        "equipment": {
            "wifi": true,
            "bathtub": false,
            "breakfast": false
        }
    },
    {
        "name": "溫泉雙人房",
        "eng": "Hot spring double Room",
        "price": 8400,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (6).jpg",
        "discount": 0.6,
        "equipment": {
            "wifi": true,
            "bathtub": true,
            "breakfast": true
        }
    },
    {
        "name": "總統套房",
        "eng": "Presidential Suite",
        "price": 23000,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (7).jpg",
        "discount": 0.75,
        "equipment": {
            "wifi": true,
            "bathtub": true,
            "breakfast": true
        }
    },
    {
        "name": "奢華四人房",
        "eng": "Luxury four Room",
        "price": 8500,
        "amount": 0,
        "cover": "http://bosscode.monoame.com/20170323_vue_comp/img/room (8).jpg",
        "discount": 0.7,
        "equipment": {
            "wifi": true,
            "bathtub": true,
            "breakfast": false
        }
    }
];

Vue.component("room",{
    template: "#room",
    props: ["room_data","hotel_discount","hotel_fee","delete_room","id"],
    computed: {
        final_discount: function(){
            return this.room_data.discount*this.hotel_discount;

        },final_discount_show: function(){
            return parseInt(this.final_discount*100);
        },
        final_price: function(){
            return parseInt(this.final_discount*this.room_data.price)+1.0*this.hotel_fee;
        },
        bg_css: function(){
            return {
                "background-image":"url('"+this.room_data.cover+"')"
            }
        }
    }
});

var vm = new Vue({
    el: "#app",
    data: {
        rooms: rooms,
        service_fee: 200,
        discount: 0.9,
        edit_id: 0
    },methods: {
        addroom: function(){
            this.rooms.push({
                "name": "新房間",
                "eng": "new Room",
                "price": 0,
                "amount": 0,
                "cover": "",
                "discount": 0.5,
                "equipment": {
                    "wifi": false,
                    "bathtub": true,
                    "breakfast": true
                }
            });
            this.edit_id=this.rooms.length-1;
        },
        delete_room: function(id){
            this.rooms.splice(id,1);
        }
    }
});
CSS:




html, body {
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

body {
    padding: 20px;
}

.cursor_pointer {
    cursor: pointer;
}

h1 {
    font-size: 24px;
}

.col_rooms, .col_edit {
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.col_edit {
    background-color: #f4f4f4;
}

.col_room {
    padding: 20px;
}

.room_container {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.room_container:hover .cover {
    background-size: 110% auto;
}
.room_container .cover {
    height: 150px;
    background-color: #eee;
    position: relative;
    background-size: 100% auto;
    background-position: center center;
    transition: 0.5s;
}
.room_container .cover i.fa.fa-times {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    cursor: pointer;
    transition: 0.5s;
}
.room_container .cover i.fa.fa-times:hover {
    color: #DB4343;
}
.room_container .cover h3 {
    position: absolute;
    bottom: 10px;
    font-size: 20px;
    padding: 5px 15px;
    background-color: #fff;
}
.room_container .info {
    padding: 10px;
}
.room_container .info h5 {
    font-size: 12px;
}
.room_container .info .final_price {
    float: right;
    color: #DB4343;
}
.room_container .info .final_price:after {
    content: "$";
}
.room_container .info .icons {
    display: inline-block;
    margin-left: 10px;
}
.room_container .info .icons span {
    margin-right: 5px;
    opacity: 0.6;
}

.room_edit {
    margin-top: 30px;
}

.col-edit {
    height: 100vh;
    overflow-y: scroll;
}

最佳答案

ReferenceError: Vue is not defined at room.js:109

只需放置 <script>在加载您的应用程序之前加载 Vue (room.js):

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="room.js"></script>

这种简单的重新排序确实消除了您提示的错误消息:https://plnkr.co/edit/d4onGB56dTpfOHrHm34c?p=preview

"it still has the same problem"

你必须意识到在当前状态下，你仍然执行你的room.js在浏览器解析您的 HTML 之前编写脚本 <body> ，因此还没有 DOM，并且 new Vue({el: '#app'})找不到任何可以附加的东西。

要么有new Vue在 DOM 准备好后延迟调用，或者简单地移动您的 <script>标记到 <body> 的末尾: https://plnkr.co/edit/lTziUUiE7egVr1IaynpL?p=preview

参见例如Invariant Violation: _registerComponent(...): Target container is not a DOM element

关于javascript - Uncaught ReferenceError : Vue is not defined at room. js:109，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50792211/

上一篇：javascript - 单击按钮更改div

下一篇：html - 如何在 Materialise 的一行上对齐两个输入文本？

相关文章：

JavaScript 合并具有相同键的对象并将它们的值相加

javascript - 一段时间后下降的信息栏

html - 导航在大胆的悬停上移动

javascript - Express module.js :550 throw err; ^ Cannot find module

javascript - 如何使用function属性作为onclick事件(input元素)的属性？

javascript - MDN 对 __proto__ 属性的解释可能有错误？

html - 具有不同高度图像的网格

javascript - 如何使div元素固定直到到达其他div

javascript - 如何找到一个元素到其父元素的 'relative'位置？还是 : How to find Mr. 蓝色？

html - 底部边框半径未显示在网页上

©2024 IT工具网  联系我们