[Vuejs]-Cannot add item to array

It looks like this.roles is probably the array of items you’re logging, right?

So by setting this.roles.id = 12;, you’re trying to set an id property of the array, not add a new item to the array with those properties.

Try this

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

That’s my best guess. You really should upload more info about the problem though:

• What are you logging in that screenshot?
• What about your current approach doesn’t work?

Here’s a solution,
I’ve created your sample role array of objects,
Created a new object to be added,

and then added the new object to the array.

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

You are directly trying to add an object into the array,
You can do that as well if you specify the index

This is an array of json elements. You need to make an element first and then push it in the array of roles like this.

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)

You got undefined error since your using “this” which refers to the window and not to the object.

You can add it manually as you already got the answers for it or you can use Class instead which in my opinion will work way better, I don’t think that using all those code copying is good, that’s my solution:

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