0

我正在使用 Vue js 2 在 Laravel 上工作，在挂载方法上我正在创建一个没有问题的多维数组（我可以使用 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 不会以这种方式获取数组更改，所以我正在使用按照他们的建议进行拼接，但我仍然无法显示多数组值。

4

2 回答 2

1

改用计算属性：

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

这是一个有效的代码笔示例。

于 2017-05-23T17:37:23.313 回答
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]
        }
      })
    }
  }
})

例子。

于 2017-05-23T17:37:40.113 回答