데이터 객체에 새 속성을 추가하는 방법은 무엇입니까?

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

당신은 일반 자바 스크립트 객체와 유사한 개체입니다 뷰에 속성을 추가 할 수 있습니다. 참고 :이

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

같은 뷰 객체에서 데이터에 액세스 할 수 있습니다 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 

이제 우리는

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

당신은 얻을 사용하여 구성 요소의 props를 업데이트 $data 속성에서 데이터에 액세스 할 수 있습니다 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 
    } 
    } 
}); 

(3210) 우리는 이름 양방향이 거짓

component.options.props.name.twoWay = faslse 

에 결합 심지어는 전체 개체를 변경할 수 있도록하려면,의가 있다고 가정 해 봅시다.

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

}

난 그냥 아이디어를 전달하기 위해 노력하고, 위의 구성이 올바른지 여부를 알고하지 않습니다.

먼저 객체를 만드는 방법, 객체를 만드는 방법 등을 배워야합니다.