Step 2

Author: maxpou

src/components/HelloWorld.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="ui container">
+    <div class="ui comments" v-for="question in questions" :key="question.question_id">
+      <question-list-item :question="question" />
+    </div>
+  </div>
+</template>
+
+<script>
+import questions from '../api/stackoverflow-search-multiple.json'
+import QuestionListItem from './QuestionListItem'
+
+export default {
+  name: 'QuestionList',
+  components: {
+    QuestionListItem
+  },
+  data () {
+    return {
+      questions: questions.items
+    }
+  }
+}
+</script>

src/components/QuestionList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="comment">
+    <a class="avatar">
+      <img :src="question.owner.profile_image">
+    </a>
+    <div class="content">
+      <a class="author">{{ question.owner.display_name }}</a>
+      <div class="metadata">
+        <div>{{ new Date(question.creation_date*1000).toLocaleDateString() }}</div>
+        <div><i class="star icon"></i>{{ question.score }} Votes</div>
+        <div><i class="comment icon"></i>{{ question.answer_count }} answers</div>
+      </div>
+      <div v-for="tag in question.tags" :key="tag" class="ui mini label">{{ tag }}</div>
+      <div class="text">
+        {{ question.title }}
+      </div>
+      <div v-if="question.is_answered" class="actions">
+        <a :href="question.link">View answers</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuestionListItem',
+  props: {
+    question: {
+      type: Object
+    }
+  }
+}
+</script>

src/components/QuestionListItem.vue

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import QuestionList from '@/components/QuestionList'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'QuestionList',
+      component: QuestionList
     }
   ]
 })