無法將項目添加到數組

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);