javascript - How to watch prop change in Vue.js component? - Stack Overflow

admin管理员组

文章数量:1203975

I'm passing an array of image filepaths to a component. I'm wondering what would be the best way to watch a prop change in Vue.js component, if I pass a different array?

I'm using bootstrap carousel, so wanna reset it to first image when array changes. In order for simplicity I reduced code example to this:

Vueponent('my-images', {
  props: ['images'],

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

I'm passing an array of image filepaths to a component. I'm wondering what would be the best way to watch a prop change in Vue.js component, if I pass a different array?

I'm using bootstrap carousel, so wanna reset it to first image when array changes. In order for simplicity I reduced code example to this:

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

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

• javascript
• vue.js
• vuejs2
• vue-component

Share Improve this question Follow edited Mar 24, 2017 at 12:24 Jonatas Walker 14.2k66 gold badges5656 silver badges8282 bronze badges asked Mar 24, 2017 at 12:16 Tadas MajerisTadas Majeris 37122 gold badges44 silver badges1212 bronze badges 2

• 3 You can watch a prop just like if it were a data item. – Roy J Commented Mar 24, 2017 at 12:22
• A feedback is welcome! – Jonatas Walker Commented Mar 27, 2017 at 11:22

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 18

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

You're good to go with this:

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

And example for typescript

  @Prop()
  options: any[];

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

本文标签： javascriptHow to watch prop change in Vuejs componentStack Overflow