Vuejs nested post and comment unwanted model binding - ruby-on-rails

Question

In my vuejs code, i am fetching data from a Rails Api, which works fine for the post, i can create a new post but when i want to post a comment and i type in one input field, it types on every other field, i'm a beginner, please help, i don't really know how to phrase a question. Here's the code
<template>
<div class="home">
<div class="panel panel-default panel-shadow">
<div class="panel-body">
<form class="form-group" #submit.prevent="postGossip" style="margin: 10px;">
<textarea class="font-control" v-model="micropost.body" placeholder="What's Happening ?" style="padding: 10px;" rows="5"></textarea>
<span style="color:red">{{ errors.body }}</span>
<button class="btn btn-danger text-right pull-right">Post</button>
</form>
</div>
</div>
<div class="panel panel-white post panel-shadow" v-for="post in microposts" transition="item">
<div class="post-heading">
<div class="pull-left image">
<img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>Anonymous</b>
</div>
<h6 class="text-muted time">{{ getHumanDate(post.created_at) }}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.body}}</p>
<div class="stats">
<div v-on:click="isShow = !isShow" class="text-right">
Comments {{post.comments.length}}
</div>
</div>
</div>
<div class="post-footer" v-show="isShow">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text" v-model="comment.body">
<span class="input-group-addon">
<button class="btn btn-primary" #click="postComment">Post</button>
</span>
</div>
<ul class="comments-list" v-for="comment in post.comments">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="http://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(comment.created_at) }}</h5>
</div>
<p>{{comment.body}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'home',
data () {
return {
micropost: {
body: ''
},
errors: {},
microposts: [],
comment: {
micropost_id: '',
body: ''
},
isShow: false
}
},
methods: {
postGossip: function () {
let self = this
this.axios.post('http://localhost:3000/api/v1/microposts', {
micropost: self.micropost
}).then(function (response) {
self.errors = {}
self.microposts.unshift(response.data)
self.micropost.body = ''
}).catch(function (response) {
console.log(response)
self.errors = 'response.data.error'
})
},
getPosts: function () {
let self = this
this.axios.get('http://localhost:3000/api/v1/microposts').then(function (response) {
self.microposts = response.data
}).catch(function (errors) {
console.log(errors)
})
},
postComment: function () {
console.log(self.comment)
},
getHumanDate: function (date) {
// return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
return moment(date).fromNow()
}
},
mounted () {
this.getPosts()
}
}
</script>
<style>
body{
background-image: url('../assets/background.png');
}
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 3px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.input-group-addon{
background-color: transparent !important;
}
.post .post-heading {
height: 95px;
padding: 20px 15px;
}
.post .post-heading .avatar {
width: 60px;
height: 60px;
display: block;
margin-right: 15px;
}
.post .post-heading .meta .title {
margin-bottom: 0;
}
.post .post-heading .meta .title a {
color: black;
}
.post .post-heading .meta .title a:hover {
color: #aaaaaa;
}
.post .post-heading .meta .time {
margin-top: 8px;
color: #999;
}
.post .post-image .image {
width: 100%;
height: auto;
}
.post .post-description {
margin: 15px;
}
.post .post-description .stats {
margin-top: 20px;
}
.post .post-description .stats .stat-item {
display: inline-block;
margin-right: 15px;
}
.post .post-description .stats .stat-item .icon {
margin-right: 8px;
}
.post .post-footer {
border-top: 1px solid #ddd;
padding: 15px;
}
.post .post-footer .comments-list {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.post .post-footer .comments-list .comment {
display: block;
width: 100%;
margin: 20px 0;
}
.post .post-footer .comments-list .comment .avatar {
width: 35px;
height: 35px;
}
.post .post-footer .comments-list .comment .comment-heading {
display: block;
width: 100%;
}
.post .post-footer .comments-list .comment .comment-heading .user {
font-size: 14px;
font-weight: bold;
display: inline;
margin-top: 0;
margin-right: 10px;
}
.post .post-footer .comments-list .comment .comment-heading .time {
font-size: 12px;
color: #aaa;
margin-top: 0;
display: inline;
}
.post .post-footer .comments-list .comment .comment-body {
margin-left: 50px;
}
.post .post-footer .comments-list .comment > .comments-list {
margin-left: 50px;
}
.item {
box-sizing: border-box;
background-color: #eee;
border: 1px solid black;
display: inline-block;
width: 100px;
height: 100px;
}
.item-enter {
opacity: 0; /* the state right after enter (enter from this state) */
}
.item-leave {
opacity: 0; /* the state right before leave (leave to this state) */
}
.item-enter-active, .item-leave-active {
transition: opacity .5s ease; /* applied during enter/leave transition */
}
.item-move {
border-color: red;
transition: transform .5s cubic-bezier(.55,0,.1,1); /* applied during moving transition */
}
</style>
And this is what happens:
1
It writes on every comment box insert of just one, any help would be greatly appreciated

Answer 1

This is happening because the object post, that you get from the API returns many comments. Than in your iterator v-for=comment in post.comments you call the iteratee defined in your object locally as comment, what causes a "collision" with the object your defined in your component data.
As post is also a iteratee of microposts you should add the newly created object to microposts. Try the following.
change the iteratee name v-for='comment in post.comments' to c. Of course change the references also in
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(c.created_at) }}</h5>
</div>
<p>{{c.body}}</p>
</div>
Then your postComment method you can clone the object | clone an object
<button class="btn btn-primary" #click="postComment(post)">Post</button>
Define the method
postComment: function (post) {
post.comments.push({body: this.comment.body});
}
Remember that if a comment has other fields, you need to set them before appending to the parent object post