web-dev-qa-db-ja.com

Vue.jsコンポーネントでプロップの変更を監視する方法は？

画像ファイルパスの配列をコンポーネントに渡しています。別の配列を渡した場合、Vue.jsコンポーネントのプロップの変更を監視するための最良の方法は何でしょうか。

私はbootstrapカルーセルを使用しているので、配列が変更されたときに最初の画像にリセットします。簡単にするために、コード例を次のように減らしました：

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

  template: `
    <section>
      <div v-for="(image, index) in images">
        {{index}} - <img :src="image"/>
      </div>
    </section>
  `
});
javascriptvue.jsvuejs2vue-component
8
Tadas Majeris
<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>
15
Binaryify

これでうまくいく：

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