0
私はVueJSで新しく、チュートリアルの後でチャットをしています。このチュートリアルの では、教授がvモデルをコンポーネントに置きます。私がこれをすると、コンポーネントは画面上にレンダリングされず、コンソールは「テキストが定義されていません」と応答します。誰かが私を助けることができればどこでもこの問題を見つけることはできません。 htmlとjs。コンポーネントのVモデルエラー（VueJS）
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat JS</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="app">
<router-link to="/chat">Vá para o Chat</router-link><br>
<router-link to="/rooms">Vá para as Salas</router-link><br><br><br>
<router-view></router-view>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
<script type="text/javascript" src="node_modules/vuefire/dist/vuefire.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
JS
var firebaseApp = firebase.initializeApp(config);
var db = firebaseApp.database();
const chatComponent = {
template: `
<div class="panel panel-primary">
<div class="panel-heading">Chat</div>
<div class="panel-body" style="height: 400px; overflow-y: scroll;">
<ul class="chat list-unstyled">
<li class="clearfix"
v-bind:class="{left: !isUser(o.email), right: isUser(o.email)}" v-for="o in chat.messages">
<span v-bind:class="{'pull-left': !isUser(o.email), 'pull-right': isUser(o.email)}">
<img v-bind:src="o.photo" class="img-circle"/>
</span>
<div class="chat-body">
<strong>{{o.name}}</strong>
<p>
{{ o.text }}
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-md" placeholder="Digite sua Mensagem..."/>
<span class="input-group-btn">
<button class="btn btn-sucess btn-md">Enviar</button>
</span>
</div>
</div>
</div>
`,
data: function() {
return {
user: {
email: '[email protected]',
name: 'Jose Joao',
},
chat: {
messages: [
{
email: "[email protected]",
text: "Olá eu sou o Fulano",
name: "Fulano",
photo: "http://placehold.it/50/000FFF/fff&text=00"
},
{
email: "[email protected]",
text: "Estou Joia, eu sou o Robo",
name: "Robo",
photo: "http://placehold.it/50/FFFFFF/fff&text=EU"
},
{
email: "[email protected]",
text: "Tudo bem com voce",
name: "Robo",
photo: "http://placehold.it/50/FFFFFF/fff&text=EU"
}
]
}
};
},
methods:{
isUser:function(email){
return this.user.email == email;
}
}
};
const RoomsComponent = {
template:`
<div class="col-md-12" >
<div class="col-md-4" v-for="o in rooms">
<div class="panel panel-primary">
<div class="panel-heading">
{{ o.name }}
</div>
<div class="panel-body">
{{o.description}}<br>
<a href="javascript:void(0)" @click="goToChat(o)">Entrar</a>
</div>
</div>
</div>
<div class="col-md-4">
<input type="text" id="problem"/>
<ul>
</ul>
</div>
</div>
`,
firebase:{
array: db.ref('array')
},
data: function() {
return {
rooms: [
{id: "001", name: "Duvidas", description: "Duvidas Gerais"},
{id: "002",name: "Cadastros/Login", description: "Duvidas sobre Acesso"},
{id: "003",name: "Planos", description: "Duvidas sobre os Planos"},
{id: "004",name: "Creditos", description: "Duvidas sobre os Creditos"},
{id: "005",name: "Modelos", description: "Duvidas sobre os Modelos"},
{id: "006",name: "Envios", description: "Duvidas sobre os Envios"}
]
};
},
methods:{
goToChat: function(room){
router.push('/chat/'+room.id)
},
insertData: function(){
this.$firebaseRefs.array.push({
text: this.text
});
}
}
};
const routes =[
{ path: '/chat/:room', component: chatComponent },
{ path: '/rooms', component: RoomsComponent }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
問題は、私はちょうどV-モデルを置くために、言った、基本的には、ID "問題"（あなたを容易にする）と入力してあることを想起し、エラーのそれは、誰もが知っていれば、ありがとう！