v-for 不通过我在 Vue 2 上的动态多维数组

Question

我正在 Laravel 使用 Vue js 2 和安装方法我正在创建一个多维数组没有问题（我可以使用 vue-devtools 查看数据），但我可以'使用 v-for 在我的页面上打印它。

但是，当我动态创建一个简单的数组时，我可以毫无问题地打印它。

我的 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 时，它工作正常：

Challenge: CH1 Players: p1 p2 p3 p4

Challenge: CH2 Players: p1 p2 p3 p4

Challenge: CH3 Players: 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

改为使用计算的属性：

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

Here's a working codepen example.

Answer 2

这对你有用吗？

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]
        }
      })
    }
  }
})

Example.

v-for 不通过我在 Vue 2 上的动态多维数组

v-for doesn't go through my dynamic multidimensional array on Vue 2

multidimensional-array

laravel

vue.js

vuejs2

v-for