https://yuheijotaki.github.io/practice-exam/
GitHub リポジトリ:https://github.com/yuheijotaki/practice-exam
https://yuheijotaki.github.io/practice-exam/static/assets/qa.json
id
field
ansType
single
(ラジオボタン)multi
(チェックボックス)queText
ansChoice
"a": "選択肢aです。"
ansItem
["a"]
["a","b"]
ansComment
ansSource
いろいろハマった気がしますが大きくはふたつです
v-mdoel:
が使えないJSON から取得した設問リストをもとに解答のラジオボタン/チェックボックスを動的する場合、v-model:
が使えず、自力で選択されたか否かを判定してデータに格納する必要があるっぽい。
ラジオボタンは値を上書きすればいいだけなのでまだよかったが、チェックボックスは v-on:change
を使うとチェック毎に値が溜まっていく一方なので、溜まった値が奇数の場合は true
、偶数の場合は false
みたいに、おそらくよくないやり方をしてしまった。
これも探り探りやりましたが、正解と解答は別の配列で作っていて、それをマッチングさせるようにしているが、 正解:["a"]
と解答: ["a"]
を ===
で繋いでも true
にならなかったので、一度配列たちを toString()
して判定した。
結構時間かかってしまったので、次のはもう少しレベル落とそうかなと思います
オブジェクトのループ
https://qiita.com/ledsun/items/953b25b60592c22811ca
https://chaika.hatenablog.com/entry/2018/10/15/090000
オブジェクトのプロパティへのアクセス
https://qiita.com/tomcky/items/0757348473873765432e
オブジェクトのプロパティ削除
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties
奇数・偶数の判定
https://9-bb.com/javascript/
型変換いろいろ
https://qiita.com/zawascript/items/a25eaf7a222ac3671275
computed
と methods
の違い、組み合わせ方法など
https://dev83.com/vue-computed-methods/
フォーム要素のバインディングに v-model
を使わない方法
https://qiita.com/gyarasu/items/7bc16ec3466f00b2c9fa
オブジェクトに動的に値を追加してリアクティブにする方法
https://qiita.com/tmak_tsukamoto/items/7623f458448fa7cd01c7