无法将项目添加到数组

Question

如何将新项目添加到数组？ 我正在尝试添加一个项目，但它返回一个错误。 请参阅下面的屏幕截图和我的代码。

截屏

JavaScript 代码

var roles = [{id: 8, display_name: "test", description: "test", created_at: "2020-02-20 11:34:22", updated_at: "2020-02-20 11:34:22"}
8: {id: 9, display_name: "ASDASD", description: "ADASD", created_at: "2020-02-20 11:39:08", updated_at: "2020-02-20 11:39:08"}
9: {id: 10, display_name: "Test1", description: "test1", created_at: "2020-02-20 11:44:01", updated_at: "2020-02-20 11:44:01"}
10: {id: 11, display_name: "Test2", description: "test2", created_at: "2020-02-21 04:18:49", updated_at: "2020-02-21 04:18:49"}
11: {id: 12, display_name: "Test3", description: "test3", created_at: "2020-02-21 06:56:52", updated_at: "2020-02-21 06:56:52"}
12: {id: 13, display_name: "Test4", description: "test4", created_at: "2020-02-21 07:00:32", updated_at: "2020-02-21 07:00:32"}];


this.roles.id = 12;
this.roles.display_name = 'Mod';
this.roles.description = 'mod';
this.roles.created_at = '2020-02-21 07:12:50';
this.roles.updated_at = '2020-02-21 07:12:50';

错误

类型错误：无法设置未定义的属性“id”

我想要什么：

将项目添加到上面屏幕截图中的数据。

笔记

我正在使用 vueJS，并且在data{}对象中设置了roles数据。

Answer 1

看起来this.roles可能是您正在记录的项目数组，对吗？

所以通过设置this.roles.id = 12; ，您正在尝试设置数组的id属性，而不是使用这些属性向数组添加新项目。

尝试这个

var newRole = {
  id: 12,
  display_name: 'Mod',
  description: 'mod',
  created_at: '2020-02-21 07:12:50',
  updated_at: '2020-02-21 07:12:50'
};

this.roles.push(newRole);

这是我最好的猜测。 不过，您确实应该上传有关该问题的更多信息：

• 你在那个截图中登录了什么？
• 你目前的方法不起作用怎么办？

Answer 2

这里有一个解决方案，
我已经创建了您的示例角色对象数组，
创建了一个要添加的新对象，
然后将新对象添加到数组中。

let roles = [
    {
        "id" : 1,
        "display_name" : "One",
        "description" : "One desc",
        "created_at" : "2020-02-21 01:01:01",
        "updated_at" : "2020-02-21 01:01:01"
    },
    {
        "id" : 2,
        "display_name" : "Two",
        "description" : "Two desc",
        "created_at" : "2020-02-21 01:01:01",
        "updated_at" : "2020-02-21 01:01:01"
    }
];

let newRole = {};
newRole.id = 3;
newRole.display_name = "Three";
newRole.description = "Three desc";
newRole.created_at = "2020-02-21 01:01:01";
newRole.updated_at = "2020-02-21 01:01:01";

roles.push(newRole);

您直接尝试将一个对象添加到数组中，
如果您指定索引，您也可以这样做

Answer 3

这是一个 json 元素数组。 您需要先创建一个元素，然后将其推送到这样的角色数组中。

let newElement = {id:12, display_name :'Mod', description : 'mod', created_at:'2020-02-21 07:12:50', updated_at:'2020-02-21 07:12:50'}
this.roles.push(newElement)

Answer 4

由于您使用的是指窗口而不是对象的“this”，因此您遇到了未定义的错误。

您可以手动添加它，因为您已经得到了答案，或者您可以使用 Class 代替，在我看来这会更好地工作，我不认为使用所有这些代码复制是好的，这是我的解决方案：

const roles = [{ id: 8, display_name: "test", description: "test", created_at: "2020-02-20 11:34:22", updated_at: "2020-02-20 11:34:22" },
{ id: 9, display_name: "ASDASD", description: "ADASD", created_at: "2020-02-20 11:39:08", updated_at: "2020-02-20 11:39:08" },
{ id: 10, display_name: "Test1", description: "test1", created_at: "2020-02-20 11:44:01", updated_at: "2020-02-20 11:44:01" },
{ id: 11, display_name: "Test2", description: "test2", created_at: "2020-02-21 04:18:49", updated_at: "2020-02-21 04:18:49" },
{ id: 12, display_name: "Test3", description: "test3", created_at: "2020-02-21 06:56:52", updated_at: "2020-02-21 06:56:52" },
{ id: 13, display_name: "Test4", description: "test4", created_at: "2020-02-21 07:00:32", updated_at: "2020-02-21 07:00:32" }];

class Role {
    id;
    display_name;
    description;
    created_at;
    updated_at;
    constructor(id, display_name, description, created_at, updated_at) {
        this.id = id;
        this.display_name = display_name;
        this.description = description;
        this.created_at = created_at;
        this.updated_at = updated_at;
    }
}

const role1 = new Role(14, "asdas", "asdasd", "2020-02-21", "2020-02-21");
roles.push(role1);
const role2 = new Role(15, "asdasas", "assdasd", "2020-02-21", "2020-02-21");
roles.push(role2);