Vue.js 컴포넌트의 프로펠러 변경을 감시하는 방법

Vue.js 컴포넌트의 프로펠러 변경을 감시하는 방법

이미지 파일 경로 배열을 컴포넌트에 전달하고 있습니다.다른 어레이를 사용할 경우 Vue.js 컴포넌트의 프로포넌트 변경을 감시하는 가장 좋은 방법은 무엇일까요?

부트스트랩 카르셀을 사용하고 있기 때문에 어레이가 변경되면 첫 번째 이미지로 리셋하고 싶습니다.알기 쉽게 하기 위해 코드 예를 다음과 같이 줄였습니다.

Vue.component('my-images', {
  props: ['images'],

  template: `
    <section>
      <div v-for="(image, index) in images">
        {{index}} - <img :src="image"/>
      </div>
    </section>
  `
});

<template>
  <div>
    {{count}}</div>
</template>

<script>
export default {
  name: 'test',
  props: ['count'],
  watch: {
    '$props':{
      handler: function (val, oldVal) { 
        console.log('watch', val)
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.count)
  }
}
</script>

다음과 같이 하십시오.

Vue.component('my-images', {
  props: ['images'],
  computed: {
    imagesComputed: function () {
      // just an example of processing `images` props
      return this.images.filter((each, index) => index > 0);
    }
  },
  template: `
    <section>
      <div v-for="(image, index) in imagesComputed">
        {{index}} - <img :src="image"/>
      </div>
    </section>
  `
});

그리고 타이프 스크립트의 예

  @Prop()
  options: any[];

  @Watch('options', {immediate: true})
  optionsChanged(newVal: any[]) {
    console.log('options changed ', newVal);
  }

언급URL : https://stackoverflow.com/questions/42999287/how-to-watch-prop-change-in-vue-js-component