Vue+Laravel项目接口数据正常但模态框内v-for不渲染内容问题求助

• 重复声明变量覆盖props：你已经在props中定义了rooms属性接收父组件传值，但是又在data中重复声明了rooms: []，组件实例化时data的返回值会覆盖props的同名属性，导致父组件传入的rooms数据被清空。
• v-for绑定的数据源未同步：模板中v-for循环用的是chatRooms，你在检查器中看到有完整字段的是rooms对象，两者没有做关联同步。如果依赖父组件传的rooms数据，直接把v-for改成room in rooms即可；如果是要调用接口拿数据，要保证chatRooms被正确赋值。
• 接口请求方法从未触发：你写了getRooms方法用来请求接口给chatRooms赋值，但是没有在任何生命周期钩子或者事件回调里调用这个方法，所以chatRooms一直是空数组，自然渲染不出内容。
• axios未引入：代码中直接用了axios发请求，但是script顶部没有引入axios的代码，会触发未定义报错，导致请求逻辑执行失败。

<script>
import { ref } from 'vue'
import axios from 'axios' // 新增axios引入
import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { ExclamationIcon, XIcon } from '@heroicons/vue/outline'

export default {
  props: ['rooms'],
  data: function () {
    return {
        chatRooms: [],
        // 删除data中重复声明的rooms，避免覆盖props
    }
  },
  // 新增mounted钩子，组件挂载后执行数据赋值逻辑
  mounted() {
    // 方案1：用父组件传入的rooms数据
    // this.chatRooms = this.rooms
    
    // 方案2：调用当前组件的接口请求方法拿数据
    this.getRooms()
  },
  methods: { 
    getRooms() {
      axios.get('/chat/rooms')
          .then(response => {
              this.chatRooms = response.data;
          })
          .catch(error => {
              console.log(error);
          })
    }
  },
  components: {
    Dialog,
    DialogOverlay,
    DialogTitle,
    TransitionChild,
    TransitionRoot,
    ExclamationIcon,
    XIcon,
  },
  setup() {
    const open = ref(true)
    return {
      open,
    }
  },
}
</script>

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