Vue子组件Prop变更未触发重新渲染问题求助

你的问题核心是子组件仅在首次挂载时发起API请求，当父组件传递的api_url prop更新时，没有触发新的请求逻辑，导致数据始终停留在初始状态。以下是两种直接可行的解决方法：

方法1：用watch监听Prop变化并重新请求 #

把请求逻辑抽成独立方法，通过watch监听api_url的变化，一旦prop更新就调用请求方法：

<template>
  <!-- 模板部分保持不变 -->
  <div v-for="house in houses" :key="house.id">
    <div class="card-header">{{ house.name }}</div>
    <div class="card-body">
      <h4 class="card-title">Price: {{ house.price }}</h4><hr>
      <div style="float:left;font-size: 0.9rem;">Bedrooms: {{ house.bedrooms }}<br>Bathrooms: {{ house.bathrooms }}</div>
      <div style="float:right; text-align: right;font-size: 0.9rem;">Storeys: {{ house.storeys }}<br>Garages: {{ house.garages }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ['api_url'],
  data() {
    return {
      houses: []
    };
  },
  mounted() {
    this.fetchHouseData();
  },
  watch: {
    // 监听api_url的变化
    api_url: {
      immediate: true, // 可选：让监听逻辑在组件初始化时也执行一次，可替代mounted里的调用
      handler(newUrl) {
        this.fetchHouseData(newUrl);
      }
    }
  },
  methods: {
    fetchHouseData(url = this.api_url) {
      axios.get(url)
        .then(res => {
          this.houses = res.data;
          console.log(this.houses);
        })
        .catch(error => {
          console.log(error);
          // 这里可添加错误提示，比如弹窗提示请求失败
        });
    }
  }
};
</script>

方法2：借助updated钩子（简化版） #

如果不需要额外的监听逻辑，也可以用updated钩子，但注意这个钩子会在组件任意更新时触发，适合简单场景：

<script>
import axios from "axios";
export default {
  props: ['api_url'],
  data() {
    return {
      houses: [],
      prevApiUrl: "" // 记录上一次的api_url，避免重复请求
    };
  },
  mounted() {
    this.fetchHouseData();
    this.prevApiUrl = this.api_url;
  },
  updated() {
    if (this.api_url !== this.prevApiUrl) {
      this.fetchHouseData();
      this.prevApiUrl = this.api_url;
    }
  },
  methods: {
    fetchHouseData() {
      axios.get(this.api_url)
        .then(res => this.houses = res.data)
        .catch(err => console.log(err));
    }
  }
};
</script>

额外优化建议 #

• 父组件的默认选项没有设置value，用户选择"---- Bedrooms ----"时会导致api_url变为空字符串，建议给默认选项补上value：

  <option value="api/v1/houses">---- Bedrooms ----</option>
  

• 可以添加加载状态，比如在data里加loading: false，请求开始时设为true，请求结束后设为false，模板中显示加载提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Artem Pokhiliuk