質問編集履歴

コンソールエラーの少なかったコードに修正

2017/08/19 18:34

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -416,50 +416,58 @@
     name: 'detail',
+    data() {
+        return {
+          question: null
+        }
+    },
     mounted() {
       this.getQuestion(this.q_id).then(question => this.question = question);
     },
-    watch: {
-      'route'(to, from){
+    beforeRouteUpdate(to, from ,next) {
-        this.getQuestion(to.params.q_id).then(question => this.question = question);
+      this.getQuestion(to.params.q_id).then(question => this.question = question);
+      next();
+    },
+    methods: {
+      getQuestion(q_id) {
+        return axios.get("http://localhost:3000/question/", {
+          params: {
+            q_id: this.$route.params.q_id
+          }
+        })
+          .then(function (response) {
+            question = response.data
+          })
+          .then(function (error) {
+            console.log("http request denied");
+          });
       }
-    },
-    methods: {
-      getQuestion(q_id) {
-        return axios.get("http://localhost:3000/question/{q_id}", {
-          params: {
-            q_id: this.$route.params.q_id
-          }
-        })
-          .then(function (response) {
-            question = response.data
-          })
-          .then(function (error) {
-            console.log(error);
-          });
-      }
     }
   }
@@ -468,6 +476,22 @@
 ```
+※まだ使い方をよく理解してはいませんが、beforeRouteUpdateがwatchと同じような働きをするとのことなので、参考にしたサイトに習ってそのまま取り入れています。
+一応上記のコードを実行するとコンソールに
+> GET http://localhost:3000/question/?q_id=h28s002 404 (Not Found)
+と表示されるので、「惜しいのかな？」とも考えています。
+Axiosのドキュメントを参考にしたparamsの指定では、APIのURLと違ってしまうので、この点を上手く修正すれば、とりあえずAPIを上手く発火できそうな気がします。(もっとシンプルな方法がある気がしてならないけど…)
 コードからもわかるとおり混乱中です。修正を続けていますが、具体的な修正案などがあればありがたいです。「**リストから取得したq_idを、詳細情報取得用のAPIに組み込んで、その内容を表示する**」ということがしたいです。

最新状況の更新

2017/08/19 18:34

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -363,3 +363,113 @@
 </script>
 ```
+###詳細ページの編集中、リストから受け取ったq_idが組み込めず…
+this.$route.params.q_idという便利なアクセス手法があるとのこと。
+これを利用してAPIの{q_id}に値を組み込めば簡単に行くのではないかと思ったものの、苦戦しています。Vue Devtoolを見る限り、詳細ページは確かにリストからq_idのパラメータを受け取っているものの、活用することがなかなかできません。
+少し理解が追いついていない現状ですが、現在のコードは下記のようになっています。
+(詳細用ページ)
+```javascript
+<template>
+  <div class="detail">
+    <div v-if="question != null">
+      <h2>{{ question.q_body }}</h2>
+    </div>
+    <div v-else>
+      <p>No Page.</p>
+    </div>
+  </div>
+</template>
+<script>
+  import axios from 'axios';
+  export default {
+    name: 'detail',
+    mounted() {
+      this.getQuestion(this.q_id).then(question => this.question = question);
+    },
+    watch: {
+      'route'(to, from){
+        this.getQuestion(to.params.q_id).then(question => this.question = question);
+      }
+    },
+    methods: {
+      getQuestion(q_id) {
+        return axios.get("http://localhost:3000/question/{q_id}", {
+          params: {
+            q_id: this.$route.params.q_id
+          }
+        })
+          .then(function (response) {
+            question = response.data
+          })
+          .then(function (error) {
+            console.log(error);
+          });
+      }
+    }
+  }
+</script>
+```
+コードからもわかるとおり混乱中です。修正を続けていますが、具体的な修正案などがあればありがたいです。「**リストから取得したq_idを、詳細情報取得用のAPIに組み込んで、その内容を表示する**」ということがしたいです。
+よろしくお願いします。

本文の部分修正

2017/08/19 18:22

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -280,7 +280,7 @@
 ```
-詳細用API(/question/{q_id})の発火方法
+###ページ遷移と同時に詳細用API(/question/{q_id})を発火したい
 アドバイスによりページ遷移が完了しましたが、現状では詳細情報を取得するためのAPI(http://localhost:3000/question/{q_id})が未発火なので、遷移先のページが空白のままです。

ページ遷移の完了と、詳細用API発火のための質問の追加

2017/08/18 17:52

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -221,3 +221,145 @@
 有用そうなソースも歓迎です。
+###[2017/08/19追記 ページ遷移できました]
+aro10さんの指摘に沿って次のように修正し、ページを遷移させることができました。
+Vue-RouterのPath設定に誤りがありました。
+> (修正前) { path: '/question/:id', component: QuestionDetail, name: 'detail'}
+(修正後) { path: '/question/**:q_id**', component: QuestionDetail, name: 'detail'}
+上記のようなルート定義を作成したうえで、QuestionList.vueのrouter-link部分を下記のように修正したところ、無事ページ遷移させることができました。
+```javascript
+<template>
+  <div class="list">
+    <h1>QuestionList page.</h1>
+    <div v-for="question in questions" v-bind:question="question.question">
+      <router-link :to="{ name: 'detail', params: {q_id: question.q_id}}">
+        <h2>{{ question.q_title }}</h2>
+      </router-link>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'QuestionList',
+    props: ['questions']
+  }
+</script>
+```
+詳細用API(/question/{q_id})の発火方法
+アドバイスによりページ遷移が完了しましたが、現状では詳細情報を取得するためのAPI(http://localhost:3000/question/{q_id})が未発火なので、遷移先のページが空白のままです。
+RootInstanceのcreated()で2012年の問題群を取得したように、ページ遷移したと同時にq_idを上記APIの{q_id}に代入して個別問題を取得したいと考えているのですが、どのような方法が考えられるでしょうか。動作こそしないものの、現在のDetailのコードなども早めに追記しようと思います。
+※動作しないので参考にしないでください。
+とりあえず詳細データのq_bodyを表示させたいと考えています。現状は詳細情報が取得されておらず、questionが空の状態なので、<div v-else>が実行されて、ページに「No Page.」と表示だけされています。
+```javascript
+<template>
+  <div class="detail">
+    <div v-if="question != null">
+      <h2>{{ this.question.q_body }}</h2>
+    </div>
+    <div v-else>
+      <p>No Page.</p>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'detail',
+    props: ['questions'],
+    created() {
+      axios.get('http://localhost:3000/question/{q_id}', {
+        params: {
+          q_id: question.question.q_id
+        }
+      })
+        .then(function(response) {
+          console.log(response);
+          this.question = response.data
+        })
+        .catch(function(response) {
+          console.log(error)
+        });
+    }
+  }
+</script>
+```

タイトルに「Vuejs」を追加、本文の一部を修正

2017/08/18 17:50

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- リストページのID要素を頼りに個別ページへ遷移させる方法
1	+ [Vue.js]リストページのID要素を頼りに個別ページへ遷移させる方法

test CHANGED Viewed

@@ -94,7 +94,7 @@
-実現したいのは、**リストのq_idを「http://localhost:3000/question/{q_id}」に当てはめて、リストページからそれぞれの個別ページに遷移させること**です。
+実現したいのは、**リストのq_idを詳細用の「http://localhost:3000/question/{q_id}」に当てはめて、リストページからそれぞれの個別ページに遷移させること**です。

タイトルの変更

2017/08/18 15:27

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- リストページのIDを頼りに個別ページに遷移させる方法
1	+ リストページのID要素を頼りに個別ページへ遷移させる方法

test CHANGED Viewed

File without changes