0
I am developing an app in Vue.js but I have some error in the array data: that contains some chat rooms, if I leave only the template it renders normally, but when entering the data with data : function(){return {rooms : [{dados}]}} the same stops being rendered and shows me no errors.
Follow the file code
app.js
const chatComponent = Vue.extend({
data: function () {
return {
user: {
email: "[email protected]",
name: "Adm System"
},
chat: {
messages: [
{
email: "[email protected]",
text: "Olá eu sou o Fulano",
name: "Fulano",
photo: "https://placehold.it/50/000FFF/fff&text=00",
color: ""
},
{
email: "[email protected]",
text: "Olá eu sou o Atendente",
name: "Adm System",
photo: "https://placehold.it/50/27ae60/fff&text=Eu",
color: ""
},
{
email: "[email protected]",
text: "Não foi possível dar continuidade",
name: "Adm System",
photo: "https://placehold.it/50/27ae60/fff&text=Eu",
color: ""
},
]
}
}
},
template: `
<div class="card" style="width: 100%">
<div class="card-header">Chat</div>
<div class="card-body">
<ul class="chat list-unstyled">
<li class="clearfix" :class="{ left: !isUser(o.email), right: isUser(o.email) }"
v-for="o in chat.messages">
<span :class="{'float-left': !isUser(o.email), 'float-right': isUser(o.email)}">
<img :src="o.photo" alt="" class="rounded-circle"
:class="{'rounded-circle-visit': !isUser(o.email), 'rounded-circle-user': isUser(o.email)}">
</span>
<div class="chat-body">
<strong><small>{{ o.name }}</small></strong>
<p class="text-primary">
{{ o.text }}
</p>
</div>
</li>
</ul>
</div>
<div class="card-footer">
<div class="input-group">
<input type="text" class="form-control input-md" placeholder="Digite a mensagem">
<span class="input-group-btn">
<button class="btn btn-success btn-md">Enviar</button>
</span>
</div>
</div>
</div>`,
methods: {
isUser: function (email) {
return this.user.email == email;
}
}
});
const roomsComponent = Vue.extend({
data: function () {
return {
rooms : [
{id : "001", name : "PHP", description : "Entusiatas PHP"},
{id : "002", name : "Java", description : "Entusiatas Java"},
{id : "003", name : "C#", description : "Entusiatas C#"},
{id : "004", name : "C++", description : "Entusiatas C++"},
{id : "005", name : "Javascript", description : "Entusiatas Javascript"},
{id : "006", name : "Vue.js", description : "Entusiastas Vue.js"}
]
};
},
template: `
<div class="col-md-4" v-for="o in rooms">
<div class="card">
<div class="card-header">
{{ o.name }}
</div>
<div class="card-body">
{{ o.description }}
</div>
</div>
</div>`
});
var componentTest = Vue.extend({
template : "<h1>Test</h1>"
});
var router = new VueRouter({
routes: [
{path: '/chat', component: chatComponent},
{path: '/room', component: roomsComponent}
]
});
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
});
Filing cabinet
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat - Test</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="app">
<router-view></router-view>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
Dependencies of
Vue
"dependencies": {
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"vue": "^2.6.10",
"vue-router": "^3.1.3"
}
It may just be some simple error in the syntax, but it’s been a while since I’ve been trying to figure out that you must be passing some detail.
I tested it here and it worked perfectly, probably either you are using some plugin or are using the var elsewhere... NOTE that you forgot the
<div class="row"></div>, may even be some CSS affecting the display for lack of this, but the code itself is all OK (apparently). An online test: https://codepen.io/brcontainer/pen/xxbRqqo?&editable=true&editors=101– Guilherme Nascimento
Guilherme posted the complete code, because I do not know if the other component is impacting the second, I’m starting in Vue.
– WMomesso
This is wrong
<div class="row">
 <div id="app">
 <router-view></router-view>
 </div>
</div>That’s not how you use the Row class, the children of Row are only the col class, it’s all wrong your HTML. I’m not saying it’s the problem, but it might be.– Guilherme Nascimento
It really was that, there is an internal mapping in Vue for bootstrap?
– WMomesso
That’s how bootstrap works, regardless of VUE, col is always direct child of Row, there can be no tags that are not of type col within ROW, pq ai breaks the layout... I even made a "framework" similar to bootstrap, but with CSS and pseudo-element (
::after {}) if the person using wrong appears an error message (without need of javascript) chance the person misses, because most people do not understand the basics of these kits/fws and only come out using even without reading the doc, even it is rare to see who uses the column system properly.– Guilherme Nascimento