Step 4

Author: maxpou

src/api/questions.js

@@ -9,3 +9,23 @@ import axios from 'axios'
 export function searchQuestions (search = 'vue') {
   return axios.get(`${process.env.API_URL}search?order=desc&sort=votes&intitle=${search}&site=stackoverflow`)
 }
+
+/**
+ * @param {number} question id
+ * @return {Promise<Object>} List of answers
+ * @see {@link https://api.stackexchange.com/docs/answers-on-questions#order=desc&sort=activity&ids=30877491&filter=!9Z(-wzu0T&site=stackoverflow&run=true}
+ * @see {@link https://api.stackexchange.com/docs/types/answer}
+ */
+export function getAnswers (id) {
+  return axios.get(`${process.env.API_URL}questions/${id}/answers?order=desc&sort=activity&site=stackoverflow&filter=!9Z(-wzu0T`)
+}
+
+/**
+ * @param {number} question id
+ * @return {Promise<Object>} Question
+ * @see {@link https://api.stackexchange.com/docs/questions-by-ids#order=desc&sort=activity&ids=30877491&filter=!-*jbN-o9Aeie&site=stackoverflow&run=true}
+ * @see {@link https://api.stackexchange.com/docs/types/question}
+ */
+export function getQuestion (id) {
+  return axios.get(`${process.env.API_URL}questions/${id}?order=desc&sort=activity&site=stackoverflow&filter=!-*jbN-o9Aeie`)
+}

src/components/AnsweredQuestion.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="ui container">
+    <div class="ui items">
+      <div class="item">
+        <div class="image">
+          <img :src="question.owner.profile_image">
+        </div>
+        <div class="content">
+          <a class="header">{{ question.title }}</a>
+          <div class="meta">
+            <span>{{ new Date(question.creation_date*1000).toLocaleDateString() }}</span>
+          </div>
+          <div class="description" v-html="question.body" />
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="ui comments" v-for="answer in answers" :key="answer.answer_id">
+      <div class="comment">
+        <a class="avatar">
+          <img :src="answer.owner.profile_image">
+        </a>
+        <div class="content">
+          <a class="author">{{ answer.owner.display_name }}</a>
+          <div class="metadata">
+            <div class="date">{{ new Date(answer.creation_date*1000).toLocaleDateString() }}</div>
+            <div class="rating">
+              <i class="star icon"></i>
+              {{ answer.score }} votes
+            </div>
+            <div v-if="answer.is_accepted" class="ui green label">
+              <i class="checkmark icon"></i> Accepted
+            </div>
+          </div>
+          <div class="text" v-html="answer.body">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getQuestion, getAnswers } from '../api/questions'
+
+export default {
+  name: 'AnsweredQuestion',
+  data () {
+    return {
+      question: {},
+      answers: []
+    }
+  },
+  mounted () {
+    getQuestion(this.$route.params.questionId).then(response => {
+      this.question = response.data.items[0]
+    })
+    getAnswers(this.$route.params.questionId).then(response => {
+      this.answers = response.data.items.sort((a, b) => b.score - a.score)
+    })
+  }
+}
+</script>
+
+<style scoped>
+* >>> pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+* >>> *:not(pre) > code {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  padding: 3px;
+  font-size: 85%;
+}
+</style>

src/components/QuestionListItem.vue

@@ -15,7 +15,9 @@
         {{ question.title }}
       </div>
       <div v-if="question.is_answered" class="actions">
-        <a :href="question.link">View answers</a>
+        <router-link
+          :to="{ name: 'AnsweredQuestion', params: { questionId: question.question_id }}"
+          >View answers</router-link>
       </div>
     </div>
   </div>

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import QuestionList from '@/components/QuestionList'
+import AnsweredQuestion from '@/components/AnsweredQuestion'
 
 Vue.use(Router)
 
@@ -10,6 +11,10 @@ export default new Router({
       path: '/',
       name: 'QuestionList',
       component: QuestionList
+    }, {
+      path: '/:questionId',
+      name: 'AnsweredQuestion',
+      component: AnsweredQuestion
     }
   ]
 })