vue-cliにて、カウントダウンタイマーが何故かNaNにってしまい動かない

現在起きている問題

いつもお世話になっております。
相談させていただきたい事はタイトル通りでして、他ではキチンと動いている下記のコードのカウントダウンタイマーが、以下のgifのようにエラーは出ていないのに何故かNaNになりvue-cli上で動いてくれません。

ちなみに素のjsでは問題なく動きます。　→　https://jsfiddle.net/nm0zq1ue/

個人的にはやっている事は上のリンク2つとも全く同じだと思うのですが、何故下記のコードの場合は動かないのでしょうか？

宜しければお力をお貸しください。

該当部分のコード

html
1<template>
2  <div class="game-spot">
3    <div class="button" v-show="!isPlaying" v-on:click="startGame">
4     <p>Click to start</p>
5    </div>
6    <div class="game" v-show="isPlaying">
7      <p class="target">{{ word }}</p>
8      <p class="info">
9        Letter count: <span>{{ score }}</span>,
10        Miss count: <span>{{ miss }}</span>,
11        Time Left: <span>{{ timeLimit }}</span>
12      </p>
13    </div>
14  </div>
15</template>

JavaScript
1<script>
2export default {
3  name: 'Typing',
4  data() {
5    return {
6      words: [
7      'apple', 'orange', 'banana'
8      ],
9      word: '',
10      location: 0,
11      score: 0,
12      miss: 0,
13      timeLimit: 3 * 1000,
14      startTime: 0,
15      isPlaying: false,
16    }
17  },
18  methods: {
19    updateTimer: function() {
20      const timeLeft = this.startTime + this.timeLimit - Date.now();
21      this.timeLimit = (timeLeft / 1000).toFixed(2);
22      const timeoutId = setTimeout(() => {
23        this.updateTimer()
24      }, 10)
25      if (timeLeft <= 0) {
26        clearTimeout(timeoutId);
27      }
28    },
29    startGame: function() {
30      this.isPlaying = !this.isPlaying
31      this.startTime = Date.now()
32      this.updateTimer()
33    },
34    updateTarget: function() {
35      let placeholder = '';
36      for(let i = 0; i < this.location; i++) {
37        placeholder += '_'
38      }
39      this.word = placeholder + this.word.substring(this.location)
40    },
41    changeTarget: function() {
42      if(this.location === this.word.length) {
43        this.word = this.words[Math.floor(Math.random() * this.words.length)]
44      }
45    },
46    typing: function(e) {
47      if(e.key === this.word[this.location]) {
48        this.location++
49        if(this.location === this.word.length) {
50          this.word = this.words[Math.floor(Math.random() * this.words.length)]
51          this.location = 0
52        }
53        this.score++
54        this.updateTarget();
55      } else {
56        this.miss++
57      }
58    }
59  },
60  created: function() {
61    this.word = this.words[Math.floor(Math.random() * this.words.length)]
62    window.addEventListener('keyup', this.typing)
63  },
64  destroyed: function() {
65    this.word = this.words[Math.floor(Math.random() * this.words.length)]
66    window.addEventListener('keyup', this.typing)
67  },
68}
69</script>

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1this.timeLimit = (timeLeft / 1000).toFixed(2);

上記の処理でtimeLimitがミリ秒から秒に、またstring型に変わっているようです。
timeLimitをテンプレート側で表示させたいからだと思いますが、計算に使うtimeLimitは
ミリ秒かつnumberを保持する必要があるので、計算用の変数をもう一つ用意すればどうでしょうか

JavaScript
1 data() {
2        return {
3            words: [
4                'apple', 'orange', 'banana'
5            ],
6            word: '',
7            location: 0,
8            score: 0,
9            miss: 0,
10            timeLimit: 3 * 1000,//表示用
11            timeLimitForCalc: 0,//計算用
12            startTime: 0,
13            isPlaying: false,
14        }
15    },
16 methods: {
17        updateTimer: function () {
18            const timeLeft = this.startTime + this.timeLimitForCalc - Date.now();
19          
20            this.timeLimit = (timeLeft / 1000).toFixed(2);
21            const timeoutId = setTimeout(() => {
22                this.updateTimer()
23            }, 10)
24            if (timeLeft <= 0) {
25                clearTimeout(timeoutId);
26            }
27            
28        },
29        startGame: function () {
30            this.isPlaying = !this.isPlaying
31            this.startTime = Date.now()
32            this.timeLimitForCalc = this.timeLimit //初期値をセット
33            this.updateTimer()
34        },
35//以下略