今週も、コロナ禍でもあり、この土日、ずっと自宅に蟄居しております。（多分、明日も）
雨でもあるし、用事もないので。
独居老人、ぼおっとテレビ点けっぱなしの合間に、
前回のNuxt.js＋Vuetify.js／MySql版 読書履歴管理システム_詳細画面追加で
日付入力部分を v-date-picker にしてみました。
簡単にできるかなと思ったのですが、クリックして表示するという部分で手間取りました。
未だ更新機能は入れていない、表示のみなので、変更できても意味ないと言えば意味ないのですが、
更新機能追加の前段階です。明日、更新機能行けるかなぁ～（ただ、その気力が・・・）
※以下、いつもの通り < を ＜ に、 > を ＞ に変換してUPしています。（化けるので）空白も全角化。
■pages/book.vue ※詳細画面 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＜template＞
＜dev＞
＜v-container＞
＜v-snackbar
v-model="alertFlg"
color="red"
style="white-space: pre-wrap;"
:top="true"
＞
{{ alertMessage }}
＜v-btn
color="white"
text
@click="alertFlg = false"
＞
Close
＜/v-btn＞
＜/v-snackbar＞
＜/v-container＞
＜v-row＞
＜v-col cols="2"＞
＜v-card-title
outlined
＞
BOOK
＜/v-card-title＞
＜/v-col＞
＜v-col cols="3" align-self="center"＞
ISBN13：{{ book[0].ISBN13 }}
＜/v-col＞
＜v-col cols="3"＞
＜v-text-field
v-model.number="inIsbn10"
label="ISBN10："
background-color="white"
clearable
maxlength="10"
/＞
＜/v-col＞
＜v-col cols="4"＞
＜v-text-field
v-model="inCoverImg"
label="表紙："
background-color="white"
clearable
maxlength="25"
/＞
＜/v-col＞
＜/v-row＞
＜v-row＞
＜v-col cols="8"＞
＜v-row no-gutters＞
＜v-col＞
＜v-text-field
v-model="inBookName"
label="書名："
background-color="white"
clearable
maxlength="50"
/＞
＜/v-col＞
＜/v-row＞
＜v-row＞
＜v-col cols="6"＞
＜v-text-field
v-model="inAuthor"
label="著者："
background-color="white"
clearable
maxlength="25"
/＞
＜/v-col＞
＜v-col cols="4"＞
＜v-text-field
v-model="inGenre"
label="分類："
background-color="white"
clearable
maxlength="25"
/＞
＜/v-col＞
＜v-col cols="2"＞
＜v-text-field
v-model="inState"
label="状況："
background-color="white"
clearable
maxlength="10"
/＞
＜/v-col＞
＜/v-row＞
＜v-row＞
＜v-col cols="4"＞
＜v-text-field
v-model="inPublisher"
label="出版社："
background-color="white"
clearable
maxlength="25"
/＞
＜/v-col＞
＜v-col cols="2"＞
＜v-select
v-model="select"
label="所有："
:items="items"
item-text="owsNam"
item-value="owsVal"
background-color="white"
/＞
＜/v-col＞
＜v-col cols="4"＞
＜v-text-field
v-model="inLibrary"
label="図書館・書店："
background-color="white"
clearable
maxlength="25"
/＞
＜/v-col＞
＜v-col cols="2"＞
＜v-text-field
v-model.number="inPurchase"
label="価格(円)："
background-color="white"
clearable
maxlength="11"
/＞
＜/v-col＞
＜/v-row＞
＜v-row no-gutters＞
＜v-col＞
＜v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
:return-value.sync="inIssueDate"
transition="scale-transition"
offset-y
min-width="auto"
＞
＜template #activator="{ on, attrs }"＞
＜v-text-field
v-model="inIssueDate"
label="発行日："
clearable
prepend-icon="mdi-calendar"
background-color="white"
v-bind="attrs"
v-on="on"
/＞
＜/template＞
＜v-date-picker
v-model="inIssueDate"
scrollable
color="blue"
locale="ja-jp"
:day-format="date =＞ new Date(date).getDate()"
@input="
$refs.menu1.save(inIssueDate)
menu1 = false
"
/＞
＜/v-menu＞
＜/v-col＞
＜v-col＞
＜v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:return-value.sync="inGetDate"
transition="scale-transition"
offset-y
min-width="auto"
＞
＜template #activator="{ on, attrs }"＞
＜v-text-field
v-model="inGetDate"
label="入手日："
clearable
prepend-icon="mdi-calendar"
background-color="white"
v-bind="attrs"
v-on="on"
/＞
＜/template＞
＜v-date-picker
v-model="inGetDate"
scrollable
color="blue"
locale="ja-jp"
:day-format="date =＞ new Date(date).getDate()"
@input="
$refs.menu2.save(inGetDate)
menu2 = false
"
/＞
＜/v-menu＞
＜/v-col＞
＜v-col＞
＜v-menu
ref="menu3"
v-model="menu3"
:close-on-content-click="false"
:return-value.sync="inReadDate"
transition="scale-transition"
offset-y
min-width="auto"
＞
＜template #activator="{ on, attrs }"＞
＜v-text-field
v-model="inReadDate"
label="読了日："
clearable
prepend-icon="mdi-calendar"
background-color="white"
v-bind="attrs"
v-on="on"
/＞
＜/template＞
＜v-date-picker
v-model="inReadDate"
scrollable
color="blue"
locale="ja-jp"
:day-format="date =＞ new Date(date).getDate()"
@input="
$refs.menu3.save(inReadDate)
menu3 = false
"
/＞
＜/v-menu＞
＜/v-col＞
＜/v-row＞
＜v-row no-gutters＞
＜v-col＞
＜v-text-field
v-model="inOverview"
label="概要："
background-color="white"
clearable
maxlength="255"
/＞
＜/v-col＞
＜/v-row＞
＜v-row no-gutters＞
＜v-col＞
＜v-textarea
v-model="inImpressions"
label="感想："
background-color="white"
clearable
auto-grow
counter
/＞
＜/v-col＞
＜/v-row＞
＜/v-col＞
＜v-col cols="4"＞
＜v-row＞
＜v-col＞
＜v-img
max-height="550"
max-width="350"
:src="`${book[0].CoverImg}`"
/＞
＜/v-col＞
＜/v-row＞
＜v-row＞
＜v-col＞
＜v-card-actions＞
＜v-btn
class="error"
@click="updateItem()"
＞
更新
＜/v-btn＞
＜v-btn
class="warning"
@click="deleteItem()"
＞
削除
＜/v-btn＞
＜/v-card-actions＞
＜/v-col＞
＜/v-row＞
＜/v-col＞
＜/v-row＞
＜/dev＞
＜/template＞
＜script＞
/* eslint-disable no-console */
export default {
name: 'BookEdit',
data () {
return {
menu1: false,
menu2: false,
menu3: false,
search: '',
select: { owsNam: '非', owsVal: '0' },
items: [
{ owsNam: '非', owsVal: '0' },
{ owsNam: '所有', owsVal: '1' }
],
book: [
{
ISBN13: '',
ISBN10: '',
BookName: '',
Author: '',
Publisher: '',
Genre: '',
IssueDate: '',
GetDate: '',
ReadDate: '',
Ownership: 0,
Purchase: 0,
Library: '',
Overview: '',
Impressions: '',
State: '',
CoverImg: ''
}
],
inIsbn10: '',
inBookName: '',
inAuthor: '',
inPublisher: '',
inGenre: '',
inIssueDate: '',
inGetDate: '',
inReadDate: '',
inOwnership: 0,
inPurchase: 0,
inLibrary: '',
inOverview: '',
inImpressions: '',
inState: '',
inCoverImg: '',
alertFlg: false,
alertMessage: ''
}
},
created () {
this.searchDate()
},
methods: {
async searchDate () {
const inIsbn13 = this.$route.query.id
if (!inIsbn13) {
this.alertFlg = true
this.alertMessage = '検索キーが未設定です！'
return
}
try {
const res = await this.$axios.$get('http://localhost:5000/search', {
params: {
id: inIsbn13
}
})
this.book = res
this.inIsbn10 = this.book[0].ISBN10
this.inBookName = this.book[0].BookName
this.inAuthor = this.book[0].Author
this.inPublisher = this.book[0].Publisher
this.inGenre = this.book[0].Genre
if (this.book[0].IssueDate) {
this.inIssueDate = this.book[0].IssueDate.slice(0, 10)
}
if (this.book[0].GetDate) {
this.inGetDate = this.book[0].GetDate.slice(0, 10)
}
if (this.book[0].ReadDate) {
this.inReadDate = this.book[0].ReadDate.slice(0, 10)
}
if (this.book[0].Ownership === '1') {
this.select.owsNam = '所有'
this.select.owsVal = '1'
} else {
this.select.owsNam = '非'
this.select.owsVal = '0'
}
this.inOwnership = this.book[0].Ownership
this.inPurchase = this.book[0].Purchase
this.inLibrary = this.book[0].Library
this.inOverview = this.book[0].Overview
this.inImpressions = this.book[0].Impressions
this.inState = this.book[0].State
this.inCoverImg = this.book[0].CoverImg
// this.alertFlg = true
// this.alertMessage = this.book[0]
} catch (e) {
console.log(e.errorCode) // eslint-disable-line no-console
this.alertFlg = true
this.alertMessage = e
}
},
updateItem () {
this.alertFlg = true
this.alertMessage = '更新機能は未実装です！'
},
deleteItem () {
this.alertFlg = true
this.alertMessage = '削除機能は未実装です！'
}
}
}
＜/script＞
