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>

当我单击图像时，我会在控制台中看到newProduct正确但在父母中什么也没发生：我尝试发出警报以查看有什么但什么也没发生

Answer 1

请注意，您的事件updateDetailsPage由 correlateds 组件发出，因此您应该进入此组件，而不是div中。参见：

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

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

1 个答案: