Блог

У меня есть страница сведений, на которой я отображаю сведения о продукте и фотографии связанных продуктов. Я бы передал данные из дочернего компонента родительскому, который является страницей сведений.

Это страница моего продукта

     <template>
      <div class="page" :newProduct="newProduct" 
            @updateDetailsPage="updatePage" >
    <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,
      newProduct:null
    };
  },
  methods: {
    setData(product, correlateds) {
      this.product = product;
      this.correlateds = correlateds;
    },
    updatePage(newProduct){
      alert('new');
      //this.newProduct = newProduct;
      //console.log('new product', newProduct);
    }
  },
  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((product, correlateds) => {
          next(vm =>{ 
            vm.setData(product.data, correlateds.data);
            // console.log(products.data);
            }
          );
        })
      );
  }
};
</script> 
  

Это мои связанные компоненты

 <template>
      <div class="container pt-4 pb-1 pl-2 pr-1">
        <h3 class="text-center"><i>You may also like...</i></h3>
        <div class="row">
          <div v-for="(related, i) in correlateds" :key="i" class="col- 
              md-4 pt-1 pb-1 pr-1 pl-1">
              <img
                  :src="`../../assets/foto/${related.fotoBig}`"
                  :alt="related.ranCodart"
                  class="img-fluid img-thumbnail rounded-circle"
                  @click="refreshDetails(related.codart)"
                >
            </div>
          </div>
      </div>
    </template>

    <script>
    import axios from "axios";
    export default {
      name: "correlateds",
      data(){
        return{
           newProduct:{
            article:{},
             relateds:[]
           }
        }
      },
      props: {
        correlateds: {
          type: Array
        }
      },
      methods:{
        refreshDetails(codart)
        {
          this.$router.push(`/products/details/${codart}`);
          //window.location.reload();//refresh page ***    

          axios
          .all([
            axios.get(`/api/products/details/${codart}`),
            axios.get(`/api/products/correlated/${codart}`)
          ])
          .then( 
            axios.spread((product, correlateds) => { 
             this.newProduct.article = product.data;
             this.newProduct.relateds = correlateds.data;   
             console.log(this.newProduct);
            }))
           .then(() => this.$emit('updateDetailsPage', this.newProduct))
           .catch(error => console.log(error.response));
        }
      }

    };
</script>
  

Когда я нажимаю на изображение, которое я вижу в консоли, NewProduct является правильным
но в родительском компоненте ничего не происходит: я пытаюсь запустить оповещение, чтобы что-то увидеть, но ничего не происходит

Обратите внимание, что ваше событие updateDetailsPage генерируется компонентом correlateds, поэтому вы должны попасть в этот компонент, а не в div . Смотрите:

 <correlateds v-if="correlateds" :correlateds="correlateds" @updateDetailsPage="updatePage" />