向猪栏卡片中传入需要的信息

src/components/PigHouseList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pig-house-list">
-    <div v-for="house in pigHouses" :key="house.id" class="pig-house-item">
+    <div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
       <div class="house-header" @click="toggleExpand(house)">
         <div class="house-info">
           <span>猪舍: {{ house.name }}</span>
@@ -45,9 +45,24 @@ export default {
     }
   },
   emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen'],
+  computed: {
+    enrichedPigHouses() {
+      return this.pigHouses.map(house => {
+        const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
+          ...pen,
+          house_name: house.name, // Add house name to pen object
+          house_id: house.id // Add house id to pen object
+        })) : [];
+        return {
+          ...house,
+          pens: pensWithHouseInfo
+        };
+      });
+    }
+  },
   methods: {
     toggleExpand(house) {
-      house.isExpanded = !house.isExpanded;
+      this.$set(house, 'isExpanded', !house.isExpanded);
     },
     // 猪舍操作
     emitAddPen(house) {
@@ -67,7 +82,7 @@ export default {
       this.$emit('delete-pen', pen);
     }
   }
-}
+};
 </script>
 
 <style scoped>