房间卡片组件获取字段方式优化

 <!--
  * @Date: 2023-12-13 13:42:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-27 16:01:27
+ * @LastEditTime: 2023-12-27 17:41:27
  * @FilePath: /meihuaApp/src/components/roomCard.vue
  * @Description: 房间详情组件
 -->
@@ -148,6 +148,27 @@ onMounted(() => {
   room_type.value = props.data.room_type;
 });
 
+watch(
+  () => props.data,
+  (val) => {
+    if (val) {
+      id.value = val.id;
+      cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
+      title.value = val.title;
+      room_num.value = val.room_num;
+      capacity.value = val.capacity;
+      num.value = val.num;
+      original_price.value = val.original_price;
+      discount_price.value = val.discount_price;
+      room_type.value = val.room_type;
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
 </script>
 
 <style lang="less">