V-Model giving problem in Components

Asked

Viewed 74 times

1

Hello, I’m new with Vuejs and I’m doing a chat following a tutorial. In the tutorial the teacher inserts a v-model inside an input into a component and all right. When I do this, the component is not "rendered" on the screen, and the console responds as "text is not defined", I can’t find this problem anywhere, if anyone can help me, I’d appreciate it, follow my html and 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>

JAVASCRIPT

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')

Remember that the problem is in the input with the problem id (to make it easier for you. Basically like I said, just by a v-model he’s in trouble, if anyone knows, thank you!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.