[Vuejs]-How can i update reviews in same routes without refreshing the page in vuejs

by

2👍

✅

The convention in Vue or libraries like it in general (e.g React) is you emit an event and pass down props.

You emit an event when something happens in general. In your example, an event you are interested in would be something like submitted on your "CreateReview" component.

(A good tip in general is thinking about what your component should emit right away. If there’s too many or seems like something is not relevant, that’s a sign you have another component inside that can be extracted.)

Now that you know you can handle an event, it’s just a matter of how to react to it (thus it’s called a reactive framework).

There’s a lot of ways you can do this:

  • With the concept of Smart and Dumb/Presentational components:
<!-- This is your page/App.vue -->
<template>
  <div>
    <ReviewForm @submitted="onSubmit" />
    <ReviewList :reviews="reviews" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      reviews: []
    }
  },

  mounted() {
    this.fetchReviews()
  },

  methods: {
    fetchReviews() {
      // ....
    },

    // The subjective part.
    onSubmit(review) {
      // Just append the new data and save 1 API call
      this.reviews.push(review)

      // Fetch from API again if you have complex sorting.
      // You might not need to pass the `review` in the event.
      this.fetchReviews()
    }
  }
}
</script>

With this, you have:

  • a Smart component (could be your page.vue or a dedicated smart component) that handles the logic
  • a Dumb/Presentational component that just renders what’s given to it
  • Imperative way
<template>
  <div>
    <ReviewForm @submitted="onSubmit" />
    <ReviewList ref="list" />
  </div>
</template>

<script>
  methods: {
    onSubmit() {
      this.$refs.list.fetchReviews()
    }
  }
</script>

If you don’t want Smart/Dumb components and just want components that encapsulate things then you can do this.

Just be wary that this might turn into habit. Vue’s standard way of doing things should be reactive which means reacting to events.

You can avoid the imperative thing and make it reactive by using Vuex/Pinia and have your components directly interact with data without the help of a parent component but that might be overkill for this situation.

👤captainskippah

Leave a comment