Eujene
@Eujene
Айти или не айти?

Почему возвращает NaN?

Привет.

Почему метод generateNumber выводит NaN на странице, хотя возвращает число?

<template>
  <div class="home">
    <div class="container">
      <div class="row">
          <div class="col-md-4" v-for="dice in dices" :key="dice.diceId">
            <div class="card mb-4 box-shadow">
              <img :src="dice.diceImage" class="card-img-top" @click="generateNumber(dice.diceNumber)">
            </div>
          </div>
      </div>
    </div>
    <div>Random Number: <strong style="color:red">{{generateNumber ()}}</strong></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      number: null,
      dices: [
        {
          diceId: 1,
          diceNumber: 20,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-twenty-faces-twenty.svg'
        },
        {
          diceId: 2,
          diceNumber: 12,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d12.svg'
        },
        {
          diceId: 3,
          diceNumber: 10,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d10.svg'
        },
        {
          diceId: 4,
          diceNumber: 8,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-eight-faces-eight.svg'
        },
        {
          diceId: 5,
          diceNumber: 6,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/perspective-dice-six.svg'
        },
        {
          diceId: 6,
          diceNumber: 4,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d4.svg'
        }
      ]
    }
  },
  methods: {
    generateNumber (diceNumber) {
      const max = Number(diceNumber)
      const min = +1
      const randomNumber = Math.floor(Math.random() * (max - min + 1) + min)

      return randomNumber
    }
  }
}
</script>

<style scoped>
  img {
    width: 40px;
    height: 40px;
  }
</style>
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 3
delphinpro
@delphinpro
frontend developer
Как думаете, что вернет этот код:

Number(undefined)
Правильно! NaN.
Ответ написан
@GA_Roman
YII2, PHP, React, NET.Core
{{ generateNumber (???) }} функция без аргумента
Ответ написан
IVinete
@IVinete
Учусь на ошибках!
Code

<template>
  <div class="home">
    <div class="container">
      <div class="row">
          <div class="col-md-4" v-for="dice in dices" :key="dice.diceId">
            <div class="card mb-4 box-shadow">
              <img :src="dice.diceImage" class="card-img-top" @click="generateNumber(dice.diceNumber)">
            </div>
          </div>
      </div>
    </div>
    <div>Random Number: <strong style="color:red">{{ number }}</strong></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      number: null,
      dices: [
        {
          diceId: 1,
          diceNumber: 20,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-twenty-faces-twenty.svg'
        },
        {
          diceId: 2,
          diceNumber: 12,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d12.svg'
        },
        {
          diceId: 3,
          diceNumber: 10,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d10.svg'
        },
        {
          diceId: 4,
          diceNumber: 8,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-eight-faces-eight.svg'
        },
        {
          diceId: 5,
          diceNumber: 6,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/perspective-dice-six.svg'
        },
        {
          diceId: 6,
          diceNumber: 4,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d4.svg'
        }
      ]
    }
  },
  methods: {
    generateNumber (diceNumber) {
      const max = Number(diceNumber)
      const min = +1
      const randomNumber = Math.floor(Math.random() * (max - min + 1) + min)
      this.number = randomNumber
    }
  }
}
</script>

<style scoped>
  img {
    width: 40px;
    height: 40px;
  }
</style>

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 80 000 до 120 000 ₽
ДП-Экспресс Санкт-Петербург
от 130 000 до 200 000 ₽
PLATFORM Тюмень
от 100 000 до 150 000 ₽
28 янв. 2021, в 15:21
10000 руб./за проект
28 янв. 2021, в 15:09
1000 руб./в час
28 янв. 2021, в 14:43
2490 руб./за проект