JSFiddle - React, Tailwind, and code Playground

by ykhirao

HTML

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id='demo'>
  <template v-for='category in categories'>
    <div v-if="category.blogs.length > 0">
      <h2>{{category.name}}</h2>
      <ul>
        <li v-for='blog in category.blogs'>{{blog.title}} - {{blog.img}}</li>
      </ul>
    </div>
  </template>
</div>

JavaScript

new Vue({
  el: '#demo',
  data: {
    categories: [
      { 
        name: 'カテゴリ1',
        blogs: [
          {
            title: "タイトル1",
            img: 'https://goo.gl/hvjbc4'
          },
          {
            title: "タイトル2",
            img: 'https://goo.gl/hvjbc4'
          },
          {
            title: "タイトル3",
            img: 'https://goo.gl/hvjbc4'
          }
        ]
      },
      { 
        name: 'カテゴリ2',
        blogs: []
      },
      { 
        name: 'カテゴリ3',
        blogs: [
          {
            title: "タイトル1",
            img: 'https://goo.gl/hvjbc4'
          },
          {
            title: "タイトル2",
            img: 'https://goo.gl/hvjbc4'
          }
        ]
      }
    ]
  }
})