Vue使用push向数组指定对象属性添加数据格式错误如何修复

问题根因 #

你现在的写法是直接向totalPlayers外层数组调用push()方法追加元素，自然会把遍历得到的0、1、2、3直接放到外层数组的末尾，和原有的第一个元素{data: [] }平级，和你想要的存入子数组的预期不符。

修复方法 #

只需要调整buttonClicked方法内的追加逻辑，定位到totalPlayers第一个元素下的data子数组再执行push操作即可，修正后的JS代码如下：

new Vue({
  el: "#app",
  data: {
    totalPlayers:[{
     data:[],
    }],
    playerList:4,
  },
  methods: {
    buttonClicked(){
        for (var i = 0; i < this.playerList; i++) {
        console.log('i was '+i);
        // 调整为向子data数组追加数据
        this.totalPlayers[0].data.push(i);
        console.log(this.totalPlayers);
      }
    }
  }
})

视图部分代码不需要做任何修改，调整后点击按钮就能得到你预期的totalPlayers[{data:[0,1,2,3]}]数据结构。

内容的提问来源于stack exchange，提问作者Yahoo