v-for не проходит через мой динамический многомерный массив в Vue 2

Question

Я работаю над Laravel с Vue js 2, и над смонтированным методом я создаю многомерный массив без проблем (я вижу данные с помощью vue-devtools), но я не могу напечатать их на своей странице, используя v -за.

Однако, когда я динамически создаю простой массив, я могу напечатать его без проблем.

Мой код Vue:

<script type='text/javascript'>
  var av = new Vue({
    el: '#validaciones',
    data: {
      vChallenges: ['CH1', 'CH2', 'CH3'],
      vPlayers: ['p1', 'p2', 'p3', 'p4'],
      vContest: [
          { ch: 'CH1', pl: ['p1', 'p2', 'p3', 'p4'] },
          { ch: 'CH2', pl: ['p1', 'p2', 'p3', 'p4'] },
          { ch: 'CH3', pl: ['p1', 'p2', 'p3', 'p4'] }
      ],
      vDynamicPlayers: [],
      vDynamicContest: [],
    },
    mounted: function() {
      for (i = 0; i < this.vChallenges.length; i++) {
        this.vDynamicContest[i] = { ch:this.vChallenges[i], pl:[] };
        for (j = 0; j < this.vPlayers.length; j++) {
          this.vDynamicContest[i].pl.splice(j, 1, this.vPlayers[j]);
        }
      }
      for (j = 0; j < this.vPlayers.length; j++) {
        this.vDynamicPlayers.splice(j, 1, this.vPlayers[j]);
      }
    }
  })

Это то, что я пытаюсь напечатать, что ничего не показывает:

<div v-for="challenge in vDynamicContest">
  <b>Challenge: @{{challenge.ch}}</b>
  <span>Players:</span> 
  <span v-for="player in challenge.pl">
    @{{player}}
  </span>
</div>

Когда я меняюсь vDynamicContest в vContest Работает нормально:

Вызов: CH1 Игроки: p1 p2 p3 p4

Вызов: CH2 Игроки: p1 p2 p3 p4

Вызов: CH3 Игроки: p1 p2 p3 p4

И нет проблем с печатью динамического массива:

<div v-for="player in vDynamicPlayers">
  <b>Player: @{{player}}</b>
</div>

Пожалуйста помоги!

Я модифицировал массивы методом push, но на этом сайте https://vuejs.org/2016/02/06/common-gotchas/ они объяснили, что vue не воспринимает изменения массива таким образом, поэтому я использую соедините, как они рекомендуют, но я все еще не могу показать значения нескольких массивов.

Answer 1

Это работает для вас?

var av = new Vue({
  el: '#validaciones',
  data: {
    vChallenges: ['CH1', 'CH2', 'CH3'],
    vPlayers: ['p1', 'p2', 'p3', 'p4'],
    vContest: [
      { ch: 'CH1', pl: ['p1', 'p2', 'p3', 'p4'] },
      { ch: 'CH2', pl: ['p1', 'p2', 'p3', 'p4'] },
      { ch: 'CH3', pl: ['p1', 'p2', 'p3', 'p4'] }
    ],
    vDynamicPlayers: [],
  },
  computed:{
    vDynamicContest(){
      return this.vChallenges.map(c => {
        return {
          ch: c, 
          pl:[...this.vPlayers]
        }
      })
    }
  }
})

Пример.

Answer 2

Вместо этого используйте вычисляемое свойство:

computed: {
  vDynamicContest: function() {
    return this.vChallenges.map((challenge) => {
      return { ch: challenge, pl: this.vPlayers }
    })
  },
},

Вот рабочий пример codepen.