Closed suzy1031 closed 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>
エラー解消
-<option v-for="option in options" :key="option.text">
+<option v-for="option in options" :key="option.text" :value="option.value">
次にレイアウト整える
高さを調整したがスマホで見ると若干スクロールできてしまう
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を返す処理を追加
TypeErrorDBにデータが無い状態だとtotalの計算メソッドがエラーになっているセレクトボックススマホで確認→inputと認識されて、キーボードが表示されるので修正画面高さchorme(ブラウザ)のfooter分高さあるので若干スクロールが必要なので修正