suzy1031 / everyday-study-app

0 stars 0 forks source link

ver1.0修正 #21

Closed suzy1031 closed 3 years ago

suzy1031 commented 3 years ago

TypeError DBにデータが無い状態だとtotalの計算メソッドがエラーになっている セレクトボックス スマホで確認→inputと認識されて、キーボードが表示されるので修正

画面高さ chorme(ブラウザ)のfooter分高さあるので若干スクロールが必要なので修正

suzy1031 commented 3 years ago

セレクトボックス修正

# 旧
<v-select v-model="study.time"
:options="options"
label="text"
:reduce="options => options.value"
placeholder="select study time"
class="style-chooser"
id="time"
>
</v-select>

/* セレクトボックスレイアウト */
.style-chooser .vs__search::placeholder, /*プレースホルダー*/
.style-chooser .vs__dropdown-toggle, /*セレクトボックス全体*/
.style-chooser .vs__dropdown-menu /*ドロップダウンメニュー*/{
  background: #0066FF;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  border: none;
}
.style-chooser .vs__dropdown-menu {
  background: white;
  opacity: 0.9;
  font-size: 1.6em;
}
.style-chooser .vs__clear /* × */,
.style-chooser .vs__open-indicator/* ▽ */ {
  fill: white;
}
.style-chooser .vs__selected /*選んだオプション*/ {
  color: white;
}
/* ここまで */
# 新コード
# 422エラー中
<select name="time" id="time" v-model="study.time">
<option v-for="option in options" :key="option.text">{{option.text}}</option>
</select>
suzy1031 commented 3 years ago

エラー解消

-<option v-for="option in options" :key="option.text">
+<option v-for="option in options" :key="option.text" :value="option.value">

次にレイアウト整える

suzy1031 commented 3 years ago

高さを調整したがスマホで見ると若干スクロールできてしまう

suzy1031 commented 3 years ago
vue.runtime.esm.js:638 [Vue warn]: Error in render: "TypeError: Cannot read property 'created_at' of undefined"

原因 レコードが1件も無いとvar data_date = new Date(this.userTotal.created_at)がTypeErrorと怒られる ローカルでも再現済

解消 this.userTotal.length == 0 の場合は0を返す処理を追加