Первый раз с 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
не отображается?
В вашем HTML вы имеете следующий div:
<div class="col-xs-12 col-md-4" id="toolbarChat">
<my-chat></my-chat>
</div>
Измените его на
<div class="col-xs-12 col-md-4" id="toolbar-chat">
<my-chat></my-chat>
</div>
Потому что это идентификатор, который ищет new Vue({el: "#toolbar-chat",...})
.
new Vue(...)
? Кроме того,ready()
является событием жизненного цикла Vue 1 и не существует в Vue 2.toolbar-chat
не на<div class="col-xs-12 col-md-4" id="toolbarChat">
.