初めて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",...})
が探しているIDだからです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加