JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div id="blog-post-demo" class="blog-post">
<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title">
    {{ post.title }} {{ post.id }}
  </blog-post>
</div>

JavaScript

Vue.component('blog-post', {
  props: ["posts"],
  template: "<div><h3>{{ posts }}</h3></div>"
  
})


new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})