回答編集履歴
1
内容修正
answer
CHANGED
|
@@ -9,10 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
Vueで双方向バインディングをやるなら、メソッドではダメです。
|
|
11
11
|
|
|
12
|
-
ページが表示された時点ですでにカウントダウンは動作してていいって前提で書きます。
|
|
12
|
+
~~ページが表示された時点ですでにカウントダウンは動作してていいって前提で書きます。~~
|
|
13
13
|
|
|
14
|
-
[mounted](https://jp.vuejs.org/v2/api/#mounted)フックを使うといいと思います。
|
|
14
|
+
~~[mounted](https://jp.vuejs.org/v2/api/#mounted)フックを使うといいと思います。~~
|
|
15
15
|
|
|
16
|
+
このコンポーネントがマウントされた時点では、まだ`noweventlistchild`の中身が空っぽのようなので、`watch`を使ってプロパティを監視するように修正しました。
|
|
17
|
+
|
|
16
18
|
```js
|
|
17
19
|
export default {
|
|
18
20
|
props: ['noweventlistchild'],
|
|
@@ -35,20 +37,20 @@
|
|
|
35
37
|
return `${days}日${hours}時間${minutes}分${seconds}秒`;
|
|
36
38
|
}
|
|
37
39
|
},
|
|
38
|
-
|
|
40
|
+
watch: {
|
|
41
|
+
noweventlistchild(new, old) {
|
|
39
|
-
|
|
42
|
+
// プロパティの配列でループ
|
|
40
|
-
// ただしmountedフックで一度動作するだけなので、
|
|
41
|
-
// 配列にあとから追加や削除があっても検知しない
|
|
42
|
-
|
|
43
|
+
new.forEach((item, index) => {
|
|
43
|
-
|
|
44
|
+
// dataに定義したcounts配列に初期値をぶっこむ
|
|
44
|
-
|
|
45
|
+
this.counts.push(this.formatRemain(this.getDuration(item.end_time)));
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
// 個別にsetIntervalをセットする
|
|
47
|
-
|
|
48
|
+
setInterval(() => {
|
|
48
|
-
|
|
49
|
+
// 自分のindexのカウンタを更新する
|
|
49
|
-
|
|
50
|
+
this.counts.splice(index, 1, this.formatRemain(this.getDuration(item.end_time)));
|
|
50
|
-
|
|
51
|
+
}, 1000);
|
|
51
|
-
|
|
52
|
+
});
|
|
53
|
+
}
|
|
52
54
|
}
|
|
53
55
|
```
|
|
54
56
|
|
|
@@ -56,4 +58,4 @@
|
|
|
56
58
|
こんな感じでカウントダウンが動作するはずです。
|
|
57
59
|
なんか間違ってたら適宜修正してください。
|
|
58
60
|
|
|
59
|
-
watch使えば、プロパティに渡ってきた配列の変更を検知してカウンタを追加したり削除したりすることもできると思います。
|
|
61
|
+
~~watch使えば、プロパティに渡ってきた配列の変更を検知してカウンタを追加したり削除したりすることもできると思います。~~
|