组件(VueJS)中的V-model错误

我是VueJS的新手，我正在跟随教程进行聊天。在教程中，教授在组件中放置了一个v模型。当我这样做时，组件不会在屏幕上"渲染"，并且控制台响应为"文本未定义"，我在任何地方都找不到这个问题，如果有人可以帮助我，我会很感激，跟随我的html和js。

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>

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: 'jose@gmail.com',
        name: 'Jose Joao',
    },
    chat: {
        messages: [
            {
                email: "fulano@gmail.com",
                text: "Olá eu sou o Fulano",
                name: "Fulano",
                photo: "http://placehold.it/50/000FFF/fff&text=00"
            },
            {
                email: "jose@gmail.com",
                text: "Estou Joia, eu sou o Robo",
                name: "Robo",
                photo: "http://placehold.it/50/FFFFFF/fff&text=EU"
            },
            {
                email: "jose@gmail.com",
                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')

回顾，问题是在输入id"问题"(方便你)基本上正如我所说，只是把它的错误的一个v模型，如果有人知道，谢谢!

您需要这样定义您的组件:

Vue.component('chat-component', {
    template: `...`,
    data: {
        // your data
    },
    methods: {
        // your methods
    },
    // and so on
});

在上面的示例代码中，您只创建了javascript对象，而不是Vue组件。

你也可以在stackoverflow中查看前面关于vue.js的问题中的jsFiddle示例，它将指导你创建Vue组件、父子通信等的语法。

相关内容

最新更新

热门标签：