回答編集履歴
6
余分なbind
test
CHANGED
|
@@ -144,8 +144,6 @@
|
|
|
144
144
|
|
|
145
145
|
props:[
|
|
146
146
|
|
|
147
|
-
"dataFromChild",
|
|
148
|
-
|
|
149
147
|
"day",
|
|
150
148
|
|
|
151
149
|
]
|
5
詳細を
test
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
省略している部分にカレンダーを呼び出すための数値を制御します。そこまで難しくないので、割愛します。
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
@@ -8,17 +12,69 @@
|
|
|
8
12
|
|
|
9
13
|
<template>
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
<table>
|
|
12
16
|
|
|
13
|
-
|
|
17
|
+
<thead>
|
|
14
18
|
|
|
15
|
-
|
|
19
|
+
<tr>
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
<th>Sun</th>
|
|
18
22
|
|
|
23
|
+
<th>Mon</th>
|
|
24
|
+
|
|
25
|
+
<th>Tue</th>
|
|
26
|
+
|
|
27
|
+
<th>Wed</th>
|
|
28
|
+
|
|
29
|
+
<th>Thi</th>
|
|
30
|
+
|
|
31
|
+
<th>Fri</th>
|
|
32
|
+
|
|
33
|
+
<th>Sat</th>
|
|
34
|
+
|
|
35
|
+
</tr>
|
|
36
|
+
|
|
37
|
+
</thead>
|
|
38
|
+
|
|
39
|
+
<tbody>
|
|
40
|
+
|
|
41
|
+
<CalTr v-for="(week,i) in weeks"
|
|
42
|
+
|
|
43
|
+
:week = "week"
|
|
44
|
+
|
|
45
|
+
></CalTr>
|
|
46
|
+
|
|
47
|
+
</tbody>
|
|
48
|
+
|
|
19
|
-
|
|
49
|
+
</table>
|
|
20
50
|
|
|
21
51
|
</template>
|
|
52
|
+
|
|
53
|
+
<script>
|
|
54
|
+
|
|
55
|
+
import CalTr from './CalTr.vue'
|
|
56
|
+
|
|
57
|
+
export default{
|
|
58
|
+
|
|
59
|
+
name: 'Calender',
|
|
60
|
+
|
|
61
|
+
components:{
|
|
62
|
+
|
|
63
|
+
CalTr,
|
|
64
|
+
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
data(){
|
|
68
|
+
|
|
69
|
+
return{
|
|
70
|
+
|
|
71
|
+
weeks: [],
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
},
|
|
76
|
+
|
|
77
|
+
/*以下略*/
|
|
22
78
|
|
|
23
79
|
```
|
|
24
80
|
|
|
@@ -30,13 +86,41 @@
|
|
|
30
86
|
|
|
31
87
|
<template>
|
|
32
88
|
|
|
33
|
-
|
|
89
|
+
<tr>
|
|
34
90
|
|
|
35
|
-
|
|
91
|
+
<CalTd v-for="day in week"
|
|
36
92
|
|
|
93
|
+
:day="day"
|
|
94
|
+
|
|
95
|
+
></CalTd>
|
|
96
|
+
|
|
37
|
-
|
|
97
|
+
</tr>
|
|
38
98
|
|
|
39
99
|
</template>
|
|
100
|
+
|
|
101
|
+
<script>
|
|
102
|
+
|
|
103
|
+
import CalTd from './CalTd.vue'
|
|
104
|
+
|
|
105
|
+
export default{
|
|
106
|
+
|
|
107
|
+
name: 'CalTr',
|
|
108
|
+
|
|
109
|
+
components:{
|
|
110
|
+
|
|
111
|
+
CalTd,
|
|
112
|
+
|
|
113
|
+
},
|
|
114
|
+
|
|
115
|
+
props:[
|
|
116
|
+
|
|
117
|
+
"week",
|
|
118
|
+
|
|
119
|
+
],
|
|
120
|
+
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
</script>
|
|
40
124
|
|
|
41
125
|
```
|
|
42
126
|
|
|
@@ -48,8 +132,26 @@
|
|
|
48
132
|
|
|
49
133
|
<template>
|
|
50
134
|
|
|
51
|
-
|
|
135
|
+
<td>{{ day }}</td>
|
|
52
136
|
|
|
53
137
|
</template>
|
|
54
138
|
|
|
139
|
+
<script>
|
|
140
|
+
|
|
141
|
+
export default{
|
|
142
|
+
|
|
143
|
+
name: 'CalTd',
|
|
144
|
+
|
|
145
|
+
props:[
|
|
146
|
+
|
|
147
|
+
"dataFromChild",
|
|
148
|
+
|
|
149
|
+
"day",
|
|
150
|
+
|
|
151
|
+
]
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
</script>
|
|
156
|
+
|
|
55
157
|
```
|
4
tableタグから追記
test
CHANGED
|
@@ -8,7 +8,15 @@
|
|
|
8
8
|
|
|
9
9
|
<template>
|
|
10
10
|
|
|
11
|
+
<table>
|
|
12
|
+
|
|
13
|
+
<tbody>
|
|
14
|
+
|
|
11
15
|
<CalTr v-for="week in weeks"><CalTr>
|
|
16
|
+
|
|
17
|
+
</tbody>
|
|
18
|
+
|
|
19
|
+
</table>
|
|
12
20
|
|
|
13
21
|
</template>
|
|
14
22
|
|
3
idではなくてin
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
<tr>
|
|
26
26
|
|
|
27
|
-
<CalTd v-for="day i
|
|
27
|
+
<CalTd v-for="day in days"></CalTd>
|
|
28
28
|
|
|
29
29
|
</tr>
|
|
30
30
|
|
2
週数と日数で説明した方がいい
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
親コンポーネント v-forで
|
|
5
|
+
親コンポーネント v-forで週数（4～5）繰り返す
|
|
6
6
|
|
|
7
7
|
```vue
|
|
8
8
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
子コンポーネント(CalTr.vue) v-forで7回繰り返す
|
|
19
|
+
子コンポーネント(CalTr.vue) v-forで7回（日数）繰り返す
|
|
20
20
|
|
|
21
21
|
```vue
|
|
22
22
|
|
1
ざっくばらんに説明
test
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
普通はコンポーネント化して作
|
|
1
|
+
Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
親コンポーネント
|
|
5
|
+
親コンポーネント v-forで月数繰り返す
|
|
6
6
|
|
|
7
7
|
```vue
|
|
8
8
|
|
|
9
9
|
<template>
|
|
10
10
|
|
|
11
|
-
<CalTr><CalTr>
|
|
11
|
+
<CalTr v-for="week in weeks"><CalTr>
|
|
12
12
|
|
|
13
13
|
</template>
|
|
14
14
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
子コンポーネント(CalTr.vue)
|
|
19
|
+
子コンポーネント(CalTr.vue) v-forで7回繰り返す
|
|
20
20
|
|
|
21
21
|
```vue
|
|
22
22
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
<tr>
|
|
26
26
|
|
|
27
|
-
<CalTd v-for="
|
|
27
|
+
<CalTd v-for="day id days"></CalTd>
|
|
28
28
|
|
|
29
29
|
</tr>
|
|
30
30
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
孫コンポーネント(CalTd.vue)
|
|
37
|
+
孫コンポーネント(CalTd.vue)
|
|
38
38
|
|
|
39
39
|
```vue
|
|
40
40
|
|