Vue pass data into array specific item name-CodePudding

Hey I am really new to Vue and for this project I was trying to add data inside array using .push() . When I push data inside totalPlayers its suppose to get data as totalPlayers[{data:[0,1,2,3]}] but it currently saves data as totalPlayers[{data: [] }, 0, 1, 2, 3]. Is there a way to fix this? Here is my code below

JsFiddle = https://jsfiddle.net/ujjumaki/xv2homt8/24/

Method

new Vue({
  el: "#app",
  data: {
    totalPlayers:[{
     data:[],
    }],
    playerList:4,
  },
  methods: {
    buttonClicked(){
        for (var i = 0; i < this.playerList; i  ) {
        console.log('i was ' i);
        this.totalPlayers.push(i);
        console.log(this.totalPlayers);
      }
    }
  }
})

View

<div id="app">
  <button @click="buttonClicked()">
    Click Me
  </button>
</div>

CodePudding user response：

data is array in first element of totalPlayers array, so try totalPlayers[0].data.push:

new Vue({
  el: "#app",
  data: {
    totalPlayers:[{
     data:[],
    }],
    playerList:4,
  },
  methods: {
    buttonClicked(){
        for (var i = 0; i < this.playerList; i  ) {
        console.log('i was ' i);
        this.totalPlayers[0].data.push(i);
        console.log(this.totalPlayers);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="buttonClicked()">
    Click Me
  </button>
</div>

CodePudding user response：

Just use this to push: this.totalPlayers[0].data.push(i); since totalPlayers is an array and you want to add to it's first element that is an object jsfiddle