Vue js模板渲染问题

时间:2017-08-11 02:49:06

标签: javascript vuejs2

第一次使用vue。我正在学习它与Laracasts的一些例子。我无法获取外部模板进行渲染,控制台显示cannot find element: #toolbar-chat

我的模板是:

<template>
    <div id="toolbar-chat">
        <div class="toolbar-chat">
            <ul v-for="chat in messages">
                <li><b>@{{ chat.nickname }} says:</b> @{{ chat.message }}</li>
            </ul>
        </div>
        <div class="input-group input-group-sm">
            <input class="form-control" value="" placeholder="Type message..." required="required"  maxlength="140" v-model="newMsg">
            <div class="input-group-btn">
                <button class="btn btn-primary" type="button" @click="press">
                    <i class="fa fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>
</template>


<script>
export default {

    mounted() {
        console.log('Component mounted.')
    },

    data() {
        return {
            nickname: [],
            message: ''
        }
    },

    ready() {
        Echo.channel(chat_channel)
            .listen('ChatMessageWasReceived', (data) => {
                // Push data to messages list.
                this.messages.push({
                    message: data.chat.message,
                    nickname: data.player.nickname
                });
            });
    },

    methods: {
        press() {
            // Send message to backend.
            this.$http.post(chat_send_route, {message: this.newMsg})
                .then((response) => {
                    // Clear input field.
                    this.newMsg = '';
                });
        }
    }
};
</script>

我的HTML包含以下标记:

<div class="col-xs-12 col-md-4" id="toolbarChat">
    <my-chat></my-chat>
</div>

我的vue组件调用位于文档就绪函数中,如下所示:

require('./../app/bootstrap');

$(document).ready(function()
{
    ....
    // Set up chat
    Vue.component('my-chat', require('./../generic/chat.vue'));

    const app = new Vue({
        el: '#toolbar-chat'
    });
});

我将vue包含在我的bootstrap文件中,然后使用webpack进行编译,没有错误。

window.Vue = require('vue');

为什么我的HTML template无法渲染?

0 个答案:

没有答案