teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

内容修正

2018/09/17 21:57

投稿

spookybird
spookybird

スコア1803

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
- mounted() {
40
+ watch: {
41
+ noweventlistchild(new, old) {
39
- // プロパティの配列でループ
42
+ // プロパティの配列でループ
40
- // ただしmountedフックで一度動作するだけなので、
41
- // 配列にあとから追加や削除があっても検知しない
42
- this.noweventlistchild.forEach((item, index) => {
43
+ new.forEach((item, index) => {
43
- // dataに定義したcounts配列に初期値をぶっこむ
44
+ // dataに定義したcounts配列に初期値をぶっこむ
44
- this.counts.push(this.formatRemain(this.getDuration(item.end_time)));
45
+ this.counts.push(this.formatRemain(this.getDuration(item.end_time)));
45
46
 
46
- // 個別にsetIntervalをセットする
47
+ // 個別にsetIntervalをセットする
47
- setInterval(() => {
48
+ setInterval(() => {
48
- // 自分のindexのカウンタを更新する
49
+ // 自分のindexのカウンタを更新する
49
- this.counts.splice(index, 1, this.formatRemain(this.getDuration(item.end_time)));
50
+ this.counts.splice(index, 1, this.formatRemain(this.getDuration(item.end_time)));
50
- }, 1000);
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使えば、プロパティに渡ってきた配列の変更を検知してカウンタを追加したり削除したりすることもできると思います。~~