从子组件刷新详细信息页面

Question

我有一个详细信息页面，其中显示产品详细信息和相关产品的照片，我将数据从子组件传递给父级，即详细信息页面。

这是我的产品页面

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

当我点击我在控制台中看到的图像时，新产品是正确的，但在父母中没有任何事情发生：我尝试运行警报以查看某些内容但没有任何反应

Answer 1

请注意，您的事件updateDetailsPage由相关组件发出，因此您应该进入此组件，而不是div。看到：

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