回答編集履歴
2
冗長コードなので文字数がキツく、要件に関係ない部分をザックリ削除した
answer
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
- firebase絡みを削除
|
|
3
3
|
- datepicker絡みを削除してv-date-pickerに置き換え
|
|
4
4
|
- .vueのままじゃ共通コードにならなそうだったので動くコードにしつつHTML1本に書き直し
|
|
5
|
+
- 要件に関係ない部分を削除
|
|
5
6
|
|
|
6
7
|
をベースにし、修正した感じです。
|
|
7
8
|
|
|
@@ -23,16 +24,11 @@
|
|
|
23
24
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
|
|
24
25
|
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
|
|
25
26
|
<script>
|
|
26
|
-
//import DatePicker from "./DatePicker";
|
|
27
27
|
Vue.use(Vuetify);
|
|
28
28
|
window.addEventListener('DOMContentLoaded', () => {
|
|
29
29
|
const child = {
|
|
30
30
|
template: `
|
|
31
31
|
<v-card>
|
|
32
|
-
<v-card-title>
|
|
33
|
-
<span class="headline">add new Travel</span>
|
|
34
|
-
</v-card-title>
|
|
35
|
-
<v-form ref="basic_info" @submit.prevent>
|
|
36
32
|
<v-card-text>
|
|
37
33
|
<v-container>
|
|
38
34
|
<v-row>
|
|
@@ -54,20 +50,15 @@
|
|
|
54
50
|
<v-text-field label="destination*" :rules="[rules.required]" v-model="destination"></v-text-field>
|
|
55
51
|
</v-col>
|
|
56
52
|
<v-col cols="12">
|
|
57
|
-
<v-text-field label="goal" v-model="goal">
|
|
53
|
+
<v-text-field label="goal" v-model="goal"></v-text-field>
|
|
58
|
-
</v-text-field>
|
|
59
54
|
</v-col>
|
|
60
55
|
</v-row>
|
|
61
56
|
</v-container>
|
|
62
57
|
<small>*indicates required field</small>
|
|
63
58
|
</v-card-text>
|
|
64
59
|
<v-row>
|
|
65
|
-
<v-spacer></v-spacer>
|
|
66
|
-
<v-btn color="blue darken-1" text @click="close">close</v-btn>
|
|
67
|
-
<v-btn type="submit" color="blue darken-1" text class="mr-3" @click="sendBasicData">start Planning
|
|
60
|
+
<v-btn type="submit" color="blue darken-1" text class="mr-3" @click="sendBasicData">start Planning</v-btn>
|
|
68
|
-
</v-btn>
|
|
69
61
|
</v-row>
|
|
70
|
-
</v-form>
|
|
71
62
|
</v-card>
|
|
72
63
|
`,
|
|
73
64
|
name: "App",
|
|
@@ -97,9 +88,6 @@
|
|
|
97
88
|
};
|
|
98
89
|
},
|
|
99
90
|
methods: {
|
|
100
|
-
close() {
|
|
101
|
-
this.$emit("close");
|
|
102
|
-
},
|
|
103
91
|
sendBasicData() {
|
|
104
92
|
console.log(this.start_date);
|
|
105
93
|
console.log(this.end_date);
|
|
@@ -119,42 +107,25 @@
|
|
|
119
107
|
};
|
|
120
108
|
const parent = {
|
|
121
109
|
template: `
|
|
122
|
-
<div>
|
|
123
|
-
|
|
110
|
+
<v-card class="mx-5 my-5" max-width="800">
|
|
124
|
-
<v-img class="white--text align-end" height="200px" :src="image_src">
|
|
125
|
-
|
|
111
|
+
<v-card-title>{{ basic_info.destination }}</v-card-title>
|
|
126
|
-
|
|
112
|
+
<v-card-subtitle class="title">{{ basic_info.start_date }} 〜 {{ basic_info.end_date }}</v-card-subtitle>
|
|
127
|
-
|
|
113
|
+
<v-card-text class="text--primary">{{ basic_info.goal }}</v-card-text>
|
|
128
|
-
{{ basic_info.end_date }}</v-card-subtitle>
|
|
129
|
-
<v-card-text class="text--primary">
|
|
130
|
-
{{ basic_info.goal }}
|
|
131
|
-
</v-card-text>
|
|
132
|
-
|
|
133
|
-
|
|
114
|
+
<v-card-actions>
|
|
134
|
-
<v-spacer></v-spacer>
|
|
135
|
-
|
|
136
|
-
|
|
115
|
+
<v-dialog v-model="basic_info_dialog" persistent max-width="600px">
|
|
137
|
-
|
|
116
|
+
<template v-slot:activator="{ on }">
|
|
138
|
-
|
|
117
|
+
<v-btn v-on="on" text>Edit</v-btn>
|
|
139
|
-
|
|
118
|
+
</template>
|
|
140
|
-
|
|
119
|
+
<basicInfoForm v-bind.sync="basic_info" @submit="editBasictest" @close="closeForm"></basicInfoForm>
|
|
141
|
-
|
|
120
|
+
</v-dialog>
|
|
142
|
-
<v-btn text>
|
|
143
|
-
Detail
|
|
144
|
-
</v-btn>
|
|
145
|
-
|
|
121
|
+
</v-card-actions>
|
|
146
|
-
|
|
122
|
+
</v-card>
|
|
147
|
-
</div>
|
|
148
123
|
`,
|
|
149
|
-
props: {
|
|
150
|
-
travel_id: {},
|
|
151
|
-
},
|
|
152
124
|
components: {
|
|
153
125
|
basicInfoForm: child,
|
|
154
126
|
},
|
|
155
127
|
data() {
|
|
156
128
|
return {
|
|
157
|
-
image_src: null,
|
|
158
129
|
basic_info: {
|
|
159
130
|
destination: null,
|
|
160
131
|
start_date: null,
|
|
@@ -162,16 +133,9 @@
|
|
|
162
133
|
goal: null,
|
|
163
134
|
},
|
|
164
135
|
basic_info_dialog: null,
|
|
165
|
-
hasNoTravels: null,
|
|
166
136
|
};
|
|
167
137
|
},
|
|
168
|
-
created() {
|
|
169
|
-
this.getUserBasicData();
|
|
170
|
-
},
|
|
171
138
|
methods: {
|
|
172
|
-
getUserBasicData: async function () {
|
|
173
|
-
console.log(this.travel_id);
|
|
174
|
-
},
|
|
175
139
|
closeForm() {
|
|
176
140
|
this.basic_info_dialog = !this.basic_info_dialog;
|
|
177
141
|
},
|
|
@@ -183,10 +147,6 @@
|
|
|
183
147
|
console.log(this.basic_info.destination);
|
|
184
148
|
console.log(this.basic_info.goal);
|
|
185
149
|
},
|
|
186
|
-
editBasicData() {
|
|
187
|
-
const self = this;
|
|
188
|
-
self.basic_info_dialog = !self.basic_info_dialog;
|
|
189
|
-
},
|
|
190
150
|
},
|
|
191
151
|
};
|
|
192
152
|
new Vue({
|
|
@@ -199,14 +159,11 @@
|
|
|
199
159
|
});
|
|
200
160
|
</script>
|
|
201
161
|
</head>
|
|
202
|
-
|
|
203
162
|
<body>
|
|
204
163
|
<div id="app">
|
|
205
164
|
<v-app>
|
|
206
165
|
<v-main>
|
|
207
|
-
<v-container>
|
|
208
|
-
|
|
166
|
+
<app></app>
|
|
209
|
-
</v-container>
|
|
210
167
|
</v-main>
|
|
211
168
|
</v-app>
|
|
212
169
|
</div>
|
1
改行あるのに勝手に箇条書きと次の文がくっついてたので改行追加
answer
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
- firebase絡みを削除
|
|
3
3
|
- datepicker絡みを削除してv-date-pickerに置き換え
|
|
4
4
|
- .vueのままじゃ共通コードにならなそうだったので動くコードにしつつHTML1本に書き直し
|
|
5
|
+
|
|
5
6
|
をベースにし、修正した感じです。
|
|
6
7
|
|
|
7
8
|
問題点はいくつかあります。
|