JSFiddle - React, Tailwind, and code Playground

by vamsi krishna

HTML

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

		
	<div id="app">
		<div v-for="(post,index) in posts">
        	<p>{{post.body}}</p>
        	<button @click="getComments(post, index)" class="btn btn-link">Comments</button>
    		<div v-for='comment in post.comments'>
        		<span class="comm">Commented by:{{comment.name}}</span>
			</div>
		</div>
	</div>

CSS

.comm{
    font-size: 0.7em;
   
}

JavaScript

new Vue({
		el: '#app',
		data: {
			posts: [
				{id: 1, body: ' this is post #1'},
				{id: 2, body: ' this is post #2'},
				{id: 3, body: ' this is post #3'},
				{id: 3, body: ' this is post #4'},
				{id: 4, body: ' this is post #5'}
			]
		},
		methods:{
			getComments(post, index){
				Vue.http.get('https://jsonplaceholder.typicode.com/users')
					.then(response => {
						this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));
					},err => {
						//handle errors
					});
			}
		}
	})