Question

我是VueJS的新手，我正在按照教程进行聊天。在教程中，教授将v模型放在一个组件中。当我这样做时，组件不会被渲染＆＃34;在屏幕上，控制台响应＆＃34;文本未定义，＆＃34;我无法在任何地方找到这个问题，如果有人可以帮助我，我会感激，请关注我的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>

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: '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＆＃34;问题＆＃34; （为了方便你）基本上就像我说的那样，如果有人知道的话，就把错误放在V型上，谢谢！

Answer 1

您需要按如下方式定义组件：

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

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

您还可以查看stackoverflow中vue.js上之前问题的jsFiddle示例，它将指导您创建Vue组件，父子通信等的语法。

组件中的V模型错误（VueJS）

1 个答案: