Details page


#1

In my details page i show an image of product and also all the images of the related product

I would reload page on image click (on related product) so it can display the new data

my product page is so

<template>
  <div class="page">
    <product-details v-if="product" :product="product"  />
    <correlateds v-if="correlateds" :correlateds="correlateds"  />
  </div>
</template>

<script>
import axios from "axios";
import ProductDetails from "../components/product/Details.vue";
import Correlateds from "../components/product/Correlateds.vue";
export default {
  name: "product",
  components: {
    ProductDetails,
    Correlateds
  },
  data() {
    return {
      product: null,
      correlateds:null
    };
  },
  methods: {
    setData(product, correlateds) {
      this.product = product;
      this.correlateds = correlateds;
    }
  },
  beforeRouteEnter(to, from, next) {
     axios
      .all([
        axios.get(`/api/products/details/${to.params.codart}`),
        axios.get(`/api/products/correlated/${to.params.codart}`)
      ])
      .then(
        axios.spread((products, correlateds) => {
          next(vm =>{ 
            vm.setData(products.data, correlateds.data);
            }
          );
        })
      );
  },
};
</script>
//related component
<template>
  <div class="container ">
    <h3 class="text-center"><i>You may also like...</i></h3>
    <div class="row">
      <div v-for="(related, i) in correlateds" :key="i" >
          <img
              :src="`../../assets/foto/${related.fotoBig}`"
              :alt="related.ranCodart"
              @click="updateDetails(related.codart)"
            >
        </div>
      </div>
  </div>
</template>

what i do in updateDetails method?
Im sure this is a question that other has already soleved but for me as newbe is so difficult

please some suggest


#2

i solved with $emit
Tks and sorry