Slava Slava - 1 year ago 136
Javascript Question

How to add new attribute in data object?

For arrays vue.js good works with default array methods: push, pop, shift, reverse... But how to create new item in object and paste some value?

new Vue({
el: '#demo',

data: {
items: [
start: '12:15',
end: '13:15',
name: 'Whatch Vue.js Laracast',
description: 'Watched the Laracast series on Vue.js',
tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
note: "Vue.js is really awesome. Thanks Evan You!!!"
start: '13:15',
end: '13:30',
name: "Rubik's Cube",
description: "Play with my Rubik's Cube",
tags: ['Logic', 'Puzzle', "Rubik's Cube"],
note: "Learned a new algorithm."

methods: {
addItemAttribute: function(name, text) {
this.items[0][name] = text;

Answer Source

You can add properties to a Vue object similar to a normal javascript object. Reference:

var obj = { a: 1};
obj.a // 1
obj.b // undefined
obj.b = 2;
// Now obj.b is defined
obj.b // 2

You can access data from Vue object like this

var vm = new Vue({
     data: {
         a: 1,
         b: 2

Now we can access data from $data property

vm.$data.a === 1;
// You can add a new property
vm.$data.c = 3;
// it can be any object
vm.$data.d = {id: 1, name: 'ABC'}

You get and update props of a component using component.options.props

var component = Vue.component('props-demo-advanced', {
    props: {
        // just type check
        size: Number,
        // type check plus other validations
        name: {
          type: String,
          required: true,
          // warn if not two way bound
          twoWay: true

Let's say, we want to make name twoWay binding to false = faslse

Or even you can change the entire object.

component.options.props = {
    size: Number,
    type: {
      type: Number,
      required: false,
      twoWay: false


I don't know the above configurations are correct or not, I am just trying to convey the idea.

You should learn Javascript first, how objects are made, how to change them etc.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download