データオブジェクトに新しい属性を追加する方法は？

Question

配列の場合vue.jsデフォルトの配列メソッドでうまくいく：push、pop、shift、reverse ...しかし、オブジェクトに新しい項目を作成して値を貼り付けるには？

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 1

あなたは、通常のjavascriptオブジェクトに類似のVueオブジェクトにプロパティを追加することができます。参考：https://vuejs.org/api/#Options-Data

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

あなたはあなたが使用して、コンポーネントのpropsを取得し、更新する今、私たちは$data財産

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'} 

からデータにアクセスすることができ、この

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

気に入りオブジェクトからデータにアクセスすることができます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 
    } 
    } 
}); 

我々は名前双方向が偽

component.options.props.name.twoWay = faslse 

、あるいはあなたがオブジェクト全体を変更することができますへの結合を作りたい、のは、言ってみましょう。

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

}

私は上記の構成が正しいかどうかわからない、私はアイデアを伝えるためにしようとしています。

あなたは