Jason challenge #3
Conversation
| this.answer1 = this.$route.params.answer1 | ||
| this.answer2 = this.$route.params.answer2 | ||
| this.answer3 = this.$route.params.answer3 |
There was a problem hiding this comment.
answer は、vuexのstateで管理すると良いかと思います
nuxt のドキュメントを貼っておきます
https://nuxtjs.org/guide/vuex-store
pages/Answers/index.vue
Outdated
| if (this.potentialResult[i].result1 === this.answer1) { | ||
| if (this.potentialResult[i].result2 === this.answer2) { | ||
| if (this.potentialResult[i].result3 === this.answer3) { | ||
| this.final = this.potentialResult[i] | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
if文の階層が深くなり、わかりにくくなっているので下記のよう書くこともできます
if (this.potentialResult[i].result1 !== this.answer1) continue
if (this.potentialResult[i].result2 !== this.answer2) continue
if (this.potentialResult[i].result3 !== this.answer3) continue
this.final = this.potentialResult[i]
break
| // this.openGraph() | ||
| }, | ||
| methods: { | ||
| determineResult() { |
There was a problem hiding this comment.
判定のロジックは stateのActionで判定させて
pages/Answers/index.vue では結果のみを表示させたいですね
| } | ||
| } | ||
| }, | ||
| sharableresult() { |
There was a problem hiding this comment.
ここのシェアの判定もロジックは stateのActionで判定させて
pages/Answers/index.vue では結果のみを表示させたいですね
pages/Answers/index.vue
Outdated
| .city-image{ | ||
| max-width: 1000px; | ||
| max-height: 600px; | ||
| /*background-image: url('~assets/kamakura.jpg');*/ |
There was a problem hiding this comment.
こちらのコメントは今後使用しますでしょうか？
使用していないコメントなどはレビュー前に消しておくと良いですよ
pages/Questions/One.vue
Outdated
| </h1> | ||
| <div class="button-container"> | ||
| <button class="quiz-button"> | ||
| <nuxt-link class="button-label" :to="{name: 'Questions-Two', params: { answer1: 'Yes' }}"> |
There was a problem hiding this comment.
質問の回答はパラメーターを渡すのではなく、vuexのstateに入れて管理してみましょう
| margin-right: 43vw; | ||
| margin-left: 5vw; | ||
| margin-bottom: 30vh; |
There was a problem hiding this comment.
margin: auto 5vw 30vh 43vw; と書けます
細かな指定は vh や vwではなく pxなどで指定したほうが良さそうですね
また表示位置などでしたら、Positionでも指定可能です
| margin-left: 5vh; | ||
| margin-right: 5vh; |
components/Header.vue
Outdated
| @@ -0,0 +1,46 @@ | |||
| <template> | |||
There was a problem hiding this comment.
こちらのファイル(components/Header.vue)は今回の課題で使用していますか？
| if (this.potentialResult[i].result3 !== this.answer3) continue | ||
|
|
||
| this.final = this.potentialResult[i] | ||
| break |
There was a problem hiding this comment.
コードがスッキリわかりやすくなったと思います 👍
| id: this.$route.params.id | ||
| } | ||
| }, | ||
| computed: { |
There was a problem hiding this comment.
ストアの値を呼び出すときは
vuex で mapStateなどのHelperが用意されているのでこちらを使うと良いでしょう
https://vuex.vuejs.org/guide/state.html
| export default { | ||
| components: { | ||
| Question: Question |
| export const getters = {} | ||
| export const mutations = { | ||
| increment(state) { | ||
| if (state.count < 4) { |
There was a problem hiding this comment.
mutations はstateに値を設定だけの役割なので、分岐などはActionsでチェックを行い、commitする使用し行うと良いかと思います
| state.count++ | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
今回Storeで管理したいものは下記のものなので、
store/answers.js と store/questions.js は一つにまとまっている方が扱いやすいと思います
- 回答の進捗
- 回答結果
| const correctAnswers = answers.filter(answer => answer) | ||
| return correctAnswers / state.questions.length | ||
| } | ||
| } |
申し訳ありませんどうなったとわかんないけどこれ大丈夫ですか？
I would like to sincerely apologize for the inconvenience caused, I was not aware that the pull request had closed