Vue.jsコンポーネントの小道具の変更を見るには？

Question

イメージファイルパスの配列をコンポーネントに渡しています。 私は別の配列を渡す場合、Vue.jsコンポーネントの小道具の変更を見るための最良の方法は何でしょうか？

私はブートストラップカルーセルを使用していますので、配列が変更されたときに最初のイメージにリセットしてください。 は単純化のためには、私はこれにコード例を削減：

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

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

Answer 1

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

Answer 2

あなたはこれで行ってもいいです：

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> 
    ` 
});