VUE/NUXT: Pass random number as props to child component

Question

I want to have a randomNumber variable inside a vue component. But in my template and in my script tag, the values never match.

using datas:

<template>
 <div :data-number="randomNumber"
</template>
<script>
export default {
 data (){
  return { randomNumber: Math.random() * 1000}
 },
 mounted: function(){
  console.log(this.randomNumber)
 }
}
</script>

using computed property:

<template>
 <div :data-number="randomNumber"
</template>
<script>
export default {
 computed{
  randomNumber: Math.random() * 1000
 },
 mounted: function(){
  console.log(this.randomNumber)
 }
}
</script>

Or passing the randomNumber as props from my parent component.

I expect data-number to be equal to this.randomNumber, but it's never the case.

I managed to get a workaround for my project, but I'm still interested in the solution here.

Any help will be much appreciated, thanks !

I tried your component in some fiddle: jsfiddle.net/Al_un/xwrpn2ea. The only difference is that I also display the value inside my div but it does work for me. My console display proper values so I don't see where is the problem (-_-) — Al-un

onuriltan onuriltan · Accepted Answer · 2019-03-29T12:38:55

The problem is that you need to first initialize randomNumber variable number as null, then assign a value in the mounted() method like:

Main Component

<template>
  <div id="app">
    {{randomNumber}}
   <ChildComp :randomNum="randomNumber"/>
  </div>
</template>

<script>
import ChildComp from './components/ChildComp'
export default {
  name: "App",
  data (){
    return { 
      randomNumber: null
    }
 },
 mounted: function(){
  this.randomNumber = Math.random() * 1000
 },
 components: {
   ChildComp
 }
};
</script>

Child Component

<template>
  <div>{{randomNum}}</div>
</template>

<script>
export default {
  name: "ChildComp",
  props: {
    randomNum: Number
  }
};
</script>

This gives the same output every time like

190.9193234159494
190.9193234159494

Because you don't know how many times your data or computed functions trigger and initialize the variable.

VUE/NUXT: Pass random number as props to child component

1 Answers