JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <comment-list :comments="comments"></comment-list>
</div>

JavaScript

const CommentItem = {
  props: ['comment'],
  
  template: `
    <li>
      {{ comment.text }}
    	<comment-list
        v-if="comment.children"
        :comments="comment.children"
      />
    </li>
  `,
  
  components: {}
}

const CommentList = {
  props: ['comments'],
  
  template: `
  	<ul>
      <comment-item
      	v-for="(comment, index) in comments"
       	:comment="comment"
        :key="index"
			/>
    </ul>
  `,
  
  components: {
    CommentItem
  }
}

CommentItem.components.CommentList = CommentList

new Vue({
  components: {
    CommentList
  },
  
  data () {
    return {
      comments: [
      	{ text: 'A', children: [ { text: '123' }, { text: '456' } ] },
        { text: 'B' },
        { text: 'C', children: [ { text: '789', children: [ { text: '012' } ] } ] }
      ]
    }
  }
}).$mount('#app')