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

Question

[Евгений]

Привет.

Почему метод 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>

Answer 1

[Сергей delphinpro]

Как думаете, что вернет этот код:

Number(undefined)
Правильно! NaN.

Answer 2

[Habr]

{{ generateNumber (???) }} функция без аргумента

Answer 3

[Swert]

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>

Comments

[Swert]

Composition API

<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>
import { reactive, ref } from 'vue'

export default {
	setup () {
		const number = ref(null)
		const dices = reactive([
		{
			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'
		}
		])

		function generateNumber (diceNumber) {
			const max = Number(diceNumber)
			const min = +1
			const randomNumber = Math.floor(Math.random() * (max - min + 1) + min)
			
			this.number = randomNumber
		}

		return {
			number,
			dices,
			generateNumber
		}
	}
}
</script>

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