有没有办法将对象从对象推送到数组？（Vue）[关闭]答案

【问题标题】：Is there a way to push an object to an array from an object? (Vue) [closed]有没有办法将对象从对象推送到数组？（Vue）[关闭]
【发布时间】：2020-12-29 21:17:24
【问题描述】：

我试图制作一个游戏来开始学习 JavaScript，但我遇到了这个我找不到答案的问题。基本上，我想将一个已经创建的对象（在本例中为“firstIPGenerator”）推送到一个名为“IPGenerators”的数组中，该数组位于另一个名为“播放器”的对象内。出于某种原因，它说 ''IPGenerators'' 数组是 ''Undefined''

//This will declare the player
var player = {
    IPPoints: 0,
    IPGenerators: [],
    EXPPoints: 10,
    EXPGenerators: [],
    XPEPoints: 10,
    XPEGenerators: [],
    PEXPoints: 10,
    PEXGenerators: []
}

//This will declare the first IPGenerator of the game
var firstIPGenerator = {
    cost: 5,
    mult: 1,
    amount: 0,
    bought: 0
}

//This will declare the first EXPGenerator of the game
var firstEXPGenerator = {
    cost: 5,
    mult: 1,
    amount: 0,
    bought: 0
}
//This will push the already created ''firstIPGenerator'' to the ''IPGenerators'' array
player.IPGenerators.push(firstIPGenerator)

//This will push the already created ''firstEXPGenerator'' to the ''EXPGenerators'' array
player.EXPGenerators.push(firstEXPGenerator)

console.log(player);

同时，''player'' 会转到创建 Vue 的 index.js

var app = new Vue({
    el: '#app', 
    data: {
        message: 'Hola Pibe',
        player: player
    },
    methods: {
    
    }
})

这是 HTML 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
   
    <title>Incrementalism</title>
</head>
<body>
    <div id="app">
        <div class="IPPoints-container">
            {{ message }}
        </div>
        <div class="IPPointsGen-container">
            <!--This will print the cost of every IPGenerator-->
            <div class="generator IPPoints-generator" v-for="IPGenerators in player.IPGenerators">
                {{ IPGenerators.cost }}
            </div>
        </div>
        <!--From here it's not important-->
        <div class="triGenPoints-container">
            <div class="EXPPoints-container">

            </div>
            <div class="XPEPoints-container">

            </div>
            <div class="PEXPoints-container">

            </div>
        </div>
        <div class="triGenerators-container">
            <div class="triGenerator EXPPoints-generator" v-for= "EXPPoints in player.EXPPoints">
                {{ EXPGenerators.cost }}
            </div>
            <div class="triGenerator EXPPoints-generator">

            </div>
            <div class="triGenerator EXPPoints-generator">
                
            </div>
        </div>
    </div>
<script src="js/vue.js"></script>
<script src="js/player.js"></script>
<script src="js/index.js"></script>
</body>

</html>

我对这一切真的很陌生，所以我会感谢所有可以提供帮助的人

【问题讨论】：

我认为错误出在其他地方。您的代码 sn-p 完美运行。
我粘贴了整个解决方案，所以 idk，也许我缺少一个扩展？
我编辑了您的问题以使 sn-p 可运行，并添加了 console.log 语句以查看结果。你可以看到它工作正常。您的对象被推送到数组中。您遇到的任何错误都与其他代码有关。
好的，我解决了这个问题，因为 Vue 一切都错了，或者一切都很好，HTML 中的 EXPGenerators 部分出现了错误。谢谢大家

标签： javascript html vue.js

【解决方案1】：

我很确定您的问题是您在引用玩家时没有使用“this”。以下应该可以工作。

this.players.IPGenerators.push(firstIPGenerator);

数据方法中定义的项目必须使用“this”引用。

【讨论】：

如果这不起作用试试这个：players.IPGenerators.push(firstIPGenerator);