Как мне сгенерировать значения массива в Vue. js и показать их?

Question

Я только начал изучать vue, пытаясь практиковать

export default {
    name:'FrontPage',
    data: function(){
        return {
            player: [
                { 'ap': ngen() },
                { 'df': ngen() },
                { 'iq': ngen() },
            ]
        }
    },
    methods: {
        ngen: function() {
            return Math.random()
        }
    }
}

<template>
    <div>
        <h2> {{ player.ap }} </h2>
        <h2> {{ player.df }} </h2>
        <h2> {{ player.iq }} </h2>
    </div>
</template>

Answer 1

Здесь отображается значение массива c:

<template>
  <div>
    <h2 v-for="player in players" v-bind:key="player.prop2">{{ player.prop1 }}</h2>
  </div>
</template>

<script>
export default {
  name: "FrontPage",
  data: function() {
    return {
      players: [{ prop1:this.ngen(), prop2:0}, 
                { prop1:this.ngen(), prop2:1},
                { prop1:this.ngen(), prop2:2}]
    };
  },
  methods: {
    ngen: function() {
      return Math.random();
    }
  }
};
</script>

Answer 2

сначала вы должны вызвать ngen с помощью this.ngen()

, также ваши игроки находятся в массиве

<template>
  <div>
    <h2>{{ player[0].ap }}</h2>
    <h2>{{ player[1].df }}</h2>
    <h2>{{ player[2].iq }}</h2>
  </div>
</template>

см. Пример в реальном времени

https://codesandbox.io/s/elated-sunset-yphur

Answer 3

Измените свой код следующим образом:

export default {
    name:'FrontPage',
    data: function(){
        return {
            player: {
                'ap': this.ngen(),
                'df': this.ngen(),
                'iq': this.ngen(),
            }
        }
    },
    methods: {
        ngen: function() {
            return Math.random()
        }
    }
}

<template>
    <div>
        <h2> {{ player.ap }} </h2>
        <h2> {{ player.df }} </h2>
        <h2> {{ player.iq }} </h2>
    </div>
</template>

Answer 4

Исходя из того, что вы хотите получить в качестве результата, я думаю, что необязательно иметь массив player в вашем объекте данных.

Просто определите ваш случайный метод и вызовите его в своем шаблоне.

<template>
    <div>
        <h2> {{ ngen() }} </h2>
        <h2> {{ ngen() }} </h2>
        <h2> {{ ngen() }} </h2>
    </div>
</template>

или просто вызовите случайную функцию JavaScript напрямую