VUE / NUXT: передать случайное число в качестве реквизита дочернему компоненту - PullRequest
Новая
       39

VUE / NUXT: передать случайное число в качестве реквизита дочернему компоненту

0 голосов
/ 29 марта 2019

Я хочу иметь переменную randomNumber внутри компонента vue. Но в моем шаблоне и в теге сценария значения никогда не совпадают.

с использованием данных: 

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

с использованием вычисляемого свойства: 

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

Или передать randomNumber в качестве реквизита из моего родительского компонента.

Я ожидаю, что число данных будет равно this.randomNumber, но это никогда не происходит.

Мне удалось найти обходной путь для моего проекта, но я все еще заинтересован в решении здесь.

Любая помощь будет высоко ценится, спасибо!

1 Ответ

0 голосов
/ 29 марта 2019

Проблема в том, что вам нужно сначала инициализировать номер переменной randomNumber как ноль, а затем присвоить значение в методе mount () , например:

Основной компонент 

<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>

Дочерний компонент 

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

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

Это выдает тот же результат каждый раз, как 

190.9193234159494
190.9193234159494

Потому что вы не знаете, какмного раз ваши данные или вычисленные функции вызывают и инициализируют переменную.

...