回答編集履歴
6
余分なbind
answer
CHANGED
|
@@ -71,7 +71,6 @@
|
|
|
71
71
|
export default{
|
|
72
72
|
name: 'CalTd',
|
|
73
73
|
props:[
|
|
74
|
-
"dataFromChild",
|
|
75
74
|
"day",
|
|
76
75
|
]
|
|
77
76
|
}
|
5
詳細を
answer
CHANGED
|
@@ -1,28 +1,79 @@
|
|
|
1
1
|
Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。
|
|
2
2
|
|
|
3
|
+
省略している部分にカレンダーを呼び出すための数値を制御します。そこまで難しくないので、割愛します。
|
|
4
|
+
|
|
3
5
|
親コンポーネント v-forで週数（4～5）繰り返す
|
|
4
6
|
```vue
|
|
5
7
|
<template>
|
|
6
|
-
|
|
8
|
+
<table>
|
|
9
|
+
<thead>
|
|
10
|
+
<tr>
|
|
11
|
+
<th>Sun</th>
|
|
12
|
+
<th>Mon</th>
|
|
13
|
+
<th>Tue</th>
|
|
14
|
+
<th>Wed</th>
|
|
15
|
+
<th>Thi</th>
|
|
16
|
+
<th>Fri</th>
|
|
17
|
+
<th>Sat</th>
|
|
18
|
+
</tr>
|
|
19
|
+
</thead>
|
|
7
|
-
|
|
20
|
+
<tbody>
|
|
8
|
-
|
|
21
|
+
<CalTr v-for="(week,i) in weeks"
|
|
22
|
+
:week = "week"
|
|
23
|
+
></CalTr>
|
|
9
|
-
|
|
24
|
+
</tbody>
|
|
10
|
-
|
|
25
|
+
</table>
|
|
11
26
|
</template>
|
|
27
|
+
<script>
|
|
28
|
+
import CalTr from './CalTr.vue'
|
|
29
|
+
export default{
|
|
30
|
+
name: 'Calender',
|
|
31
|
+
components:{
|
|
32
|
+
CalTr,
|
|
33
|
+
},
|
|
34
|
+
data(){
|
|
35
|
+
return{
|
|
36
|
+
weeks: [],
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
/*以下略*/
|
|
12
40
|
```
|
|
13
41
|
|
|
14
42
|
子コンポーネント(CalTr.vue) v-forで7回（日数）繰り返す
|
|
15
43
|
```vue
|
|
16
44
|
<template>
|
|
17
|
-
|
|
45
|
+
<tr>
|
|
18
|
-
|
|
46
|
+
<CalTd v-for="day in week"
|
|
47
|
+
:day="day"
|
|
48
|
+
></CalTd>
|
|
19
|
-
|
|
49
|
+
</tr>
|
|
20
50
|
</template>
|
|
51
|
+
<script>
|
|
52
|
+
import CalTd from './CalTd.vue'
|
|
53
|
+
export default{
|
|
54
|
+
name: 'CalTr',
|
|
55
|
+
components:{
|
|
56
|
+
CalTd,
|
|
57
|
+
},
|
|
58
|
+
props:[
|
|
59
|
+
"week",
|
|
60
|
+
],
|
|
61
|
+
}
|
|
62
|
+
</script>
|
|
21
63
|
```
|
|
22
64
|
|
|
23
65
|
孫コンポーネント(CalTd.vue)
|
|
24
66
|
```vue
|
|
25
67
|
<template>
|
|
26
|
-
|
|
68
|
+
<td>{{ day }}</td>
|
|
27
69
|
</template>
|
|
70
|
+
<script>
|
|
71
|
+
export default{
|
|
72
|
+
name: 'CalTd',
|
|
73
|
+
props:[
|
|
74
|
+
"dataFromChild",
|
|
75
|
+
"day",
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
28
79
|
```
|
4
tableタグから追記
answer
CHANGED
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
親コンポーネント v-forで週数（4～5）繰り返す
|
|
4
4
|
```vue
|
|
5
5
|
<template>
|
|
6
|
+
<table>
|
|
7
|
+
<tbody>
|
|
6
8
|
<CalTr v-for="week in weeks"><CalTr>
|
|
9
|
+
</tbody>
|
|
10
|
+
</table>
|
|
7
11
|
</template>
|
|
8
12
|
```
|
|
9
13
|
|
3
idではなくてin
answer
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
```vue
|
|
12
12
|
<template>
|
|
13
13
|
<tr>
|
|
14
|
-
<CalTd v-for="day
|
|
14
|
+
<CalTd v-for="day in days"></CalTd>
|
|
15
15
|
</tr>
|
|
16
16
|
</template>
|
|
17
17
|
```
|
2
週数と日数で説明した方がいい
answer
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。
|
|
2
2
|
|
|
3
|
-
親コンポーネント v-forで
|
|
3
|
+
親コンポーネント v-forで週数（4～5）繰り返す
|
|
4
4
|
```vue
|
|
5
5
|
<template>
|
|
6
6
|
<CalTr v-for="week in weeks"><CalTr>
|
|
7
7
|
</template>
|
|
8
8
|
```
|
|
9
9
|
|
|
10
|
-
子コンポーネント(CalTr.vue) v-forで7回繰り返す
|
|
10
|
+
子コンポーネント(CalTr.vue) v-forで7回（日数）繰り返す
|
|
11
11
|
```vue
|
|
12
12
|
<template>
|
|
13
13
|
<tr>
|
1
ざっくばらんに説明
answer
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
普通はコンポーネント化して作
|
|
1
|
+
Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。
|
|
2
2
|
|
|
3
|
-
親コンポーネント
|
|
3
|
+
親コンポーネント v-forで月数繰り返す
|
|
4
4
|
```vue
|
|
5
5
|
<template>
|
|
6
|
-
<CalTr><CalTr>
|
|
6
|
+
<CalTr v-for="week in weeks"><CalTr>
|
|
7
7
|
</template>
|
|
8
8
|
```
|
|
9
9
|
|
|
10
|
-
子コンポーネント(CalTr.vue)
|
|
10
|
+
子コンポーネント(CalTr.vue) v-forで7回繰り返す
|
|
11
11
|
```vue
|
|
12
12
|
<template>
|
|
13
13
|
<tr>
|
|
14
|
-
<CalTd v-for="
|
|
14
|
+
<CalTd v-for="day id days"></CalTd>
|
|
15
15
|
</tr>
|
|
16
16
|
</template>
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
孫コンポーネント(CalTd.vue)
|
|
19
|
+
孫コンポーネント(CalTd.vue)
|
|
20
20
|
```vue
|
|
21
21
|
<template>
|
|
22
22
|
<td>...</td>
|