Vue 소품 데이터가 하위 구성 요소에서 업데이트되지 않음

Vue 소품 데이터가 하위 구성 요소에서 업데이트되지 않음

안녕하세요 여러분 저는 vue 소품 데이터에 대한 설명을 듣고 싶습니다.부모 컴포넌트에서 자녀 컴포넌트로 값을 전달합니다.문제는 상위 데이터가 변경/업데이트되면 하위 구성 요소에서 업데이트되지 않는다는 것입니다.

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

하지만 소품명 {{testdata}}을 사용하여 부모로부터의 데이터를 올바르게 표시하고 있습니다.

Vue.component('child-component', {
  template: '<div class="child">{{testData}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

잘 부탁드립니다

바이올린 링크

이것은 매우 간단한 예시로 가장 잘 설명됩니다.

let a = 'foo'
let b = a
a = 'bar'

console.info('a', a)
console.info('b', b)

할당 시...

val: this.testData

의 초기값을 설정하고 있습니다.val컴포넌트가 생성되었을 때 한 번.소품 변경은 에 반영되지 않습니다.val가 로 바뀌는 것과 같은 방법으로a상기의 내용은 에 반영되지 않는다.b.

https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow 를 참조해 주세요.

나는 결심한다! this.$set(this.mesas, i, event);

data() {
    return { mesas: [] }
},
components: {
    'table-item': table_l,    
},
methods: {
    deleteMesa: function(event) {
        let i = this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a borrare", i); 
        this.mesas.splice(i, 1);
    },
    updateMesa: function(event) {
        let i =this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a actualizar", i); 
        ///    With this method Vue say Warn
        //this.mesas[i]=event;  
        /// i Resolve as follow
        this.$set(this.mesas, i, event);
     },
     // Adds Useres online
     addMesa: function(me) {
         console.log(me);
         this.mesas.push(me);
     }
}

언급URL : https://stackoverflow.com/questions/49419314/vue-props-data-not-updating-in-child-component