[javascript] Vue.js-중첩 된 데이터를 올바르게 감시하는 방법

소품 변형을 올바르게 감시하는 방법을 이해하려고합니다. ajax 호출에서 데이터를 수신하고 데이터를 객체 안에 넣고 v-for 지시문을 통해 일부 하위 구성 요소를 렌더링 단순화 아래에 렌더링하는 상위 구성 요소 (.vue 파일)가 있습니다.

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

… 그런 다음 내부 <script>태그 :

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

아이템 객체는 다음과 같습니다 :

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

이제 내 자식 “플레이어”구성 요소 내에서 항목의 속성 변형을 보려고합니다.

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

그것은 작동하지만 조금 까다로워 보입니다. 그리고 이것이 올바른 방법인지 궁금합니다. 내 목표는 prop변경 될 때마다 어떤 행동을 수행 하거나 myArray새로운 요소 나 기존의 요소 내에서 변형을 얻는 것입니다. 모든 제안을 부탁드립니다.



답변

이를 위해 깊은 감시자 를 사용할 수 있습니다 .

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

이제 item배열 의 객체에 대한 변경 사항 과 Vue.set 과 함께 사용되는 경우 배열 자체에 대한 추가 사항을 감지합니다 . JSFiddle은 다음과 같습니다. http://jsfiddle.net/je2rw3rs/

a

편집하다

최상위 객체의 모든 변경 사항을보고 싶지 않고 중첩 된 객체를 직접 보는 데 덜 어색한 구문을 원한다면 computed대신 간단히 볼 수 있습니다 .

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

JSFiddle은 다음과 같습니다. http://jsfiddle.net/oa07r5fw/


답변

또 다른 좋은 접근 방법과 조금 더 우아한 방법은 다음과 같습니다.

 watch:{
     'item.someOtherProp': function (newVal, oldVal){
         //to work with changes in someOtherProp
     },
     'item.prop': function(newVal, oldVal){
         //to work with changes in prop
     }
 }

(나는 여기 의견에 @peerbolte 에서이 접근법을 배웠습니다 )


답변

자식 객체의 VueJs 딥 워치

new Vue({
    el: "#myElement",
    data: {
        entity: {
            properties: []
        }
    },
    watch: {
        'entity.properties': {
            handler: function (after, before) {
                // Changes detected. Do work...     
            },
            deep: true
        }
    }
});


답변

속성을 잠시보고 나서 보지 않으려면 어떻게해야합니까?

또는 라이브러리 하위 구성 요소 속성을 보려고합니까?

“동적 감시자”를 사용할 수 있습니다.

this.$watch(
 'object.property', //what you want to watch
 (newVal, oldVal) => {
    //execute your code here
 }
)

$watch호출 될 경우 시청을 중지 것이다 주시 해제 기능을 반환합니다.

var unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

또한 deep옵션을 사용할 수 있습니다 :

this.$watch(
'someObject', () => {
    //execute your code here
},
{ deep: true }
)

좀 걸릴 있는지 확인하십시오 문서로를


답변

여기에 언급되지 않았지만 수업을 vue-property-decorator연장하는 경우 패턴 을 사용할 수도 있습니다 Vue.

import { Watch, Vue } from 'vue-property-decorator';

export default class SomeClass extends Vue {
   ...

   @Watch('item.someOtherProp')
   someOtherPropChange(newVal, oldVal) {
      // do something
   }

   ...
}


답변

이 솔루션을 ‘해킹’하는 데 추가 한 또 다른 방법은 이렇게 computed하는 것입니다. 중첩 된 개체 값을 반환 하는 별도의 값을 설정했습니다 .

data : function(){
    return {
        my_object : {
            my_deep_object : {
                my_value : "hello world";
            }.
        },
    };
},
computed : {
    helper_name : function(){
        return this.my_object.my_deep_object.my_value;
    },
},
watch : {
    helper_name : function(newVal, oldVal){
        // do this...
    }
}


답변

사용의 허용 대답에 내 문제는 deep: true, 배열을 깊은 볼 때, 나는 쉽게 식별 할 수 있다는 것입니다 있는 변화를 포함하는 배열의 요소입니다. 내가 찾은 유일한 해결책은 이 답변 입니다. 이 답변은 구성 요소를 만드는 방법을 설명하므로 각 배열 요소를 개별적으로 볼 수 있습니다.


댓글 달기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다