CODEWITHSUNDEEP
vue.jsvuejs2rendervue-component
Anna Collins
Anna Collins

Reputation: 33

Which method can I use which will be called every time a prop on a component changes

I am new to Vue. I am passing props to a child component and when the props change, I am using watch to catch the changes and assign them to this.query. I am able to log this change in watch and it is working. The prop value is changing on the page but mounted is not being called again, it is only being called once when the component is rendered for the first time,. I want to be able to do a fetch each time these props change.

I have tried to play around with updated and beforeUpdate but I am unable to log the props there and so don't know where I can fetch the data every time they change.

<template>
  <div class="movie-list">
    <h1>{{ query }}</h1> 
    //At the moment I am just rendering the query which is changing as the prop changes but I want to be able to render movies incrementally from a fetch in mounted() as this.query changes
  </div>
</template>

<script>

export default {
  props: ['query'],
  name: 'SearchedMovies',
  data: function () {
    return {
      movies: []
    }
  },
  watch: {
    query: function(newVal){
      this.query = newVal
      console.log('query in watch', this.query); 
      //this is logging each time it changes
    }
  },
  updated () {
    console.log('query in updated', this.query);
    //this is not logging
  },
  beforeUpdate () {
    console.log('query in beforeUpdate', this.query);
    //this is not logging
  },
  mounted () {
    console.log('this is the query in SearchedMovies', this.query);
    //this is logging once when the component first renders
    //I want to be able to do a fetch here each time this.query changes and save the results to this.movies.
  }
}
</script>

Upvotes: 1

Views: 158

Answers (1)

Roy J
Roy J

Reputation: 43881

The watch will be called any time the query prop changes. You are assigning the new value — which is already in the query prop — back to the query prop, which is a bad idea, because you should not modify props.

Just put your fetch inside the watch callback.

Upvotes: 1

Related Questions