Vue Laravel 不显示方法中的数据

Question

我知道我是盲人，因为我已经断断续续地看着这个 2 天，我想我只是盯着真正发生的事情。下面是代码。应该发生的是一个数据数组应该显示在一个模式中。我可以在所有字段的网络检查器中将数据视为“房间”，但它没有填充到 v-for 中 - 如果你能看到我搞砸的地方，我所要求的只是一点帮助

<!-- This example requires Tailwind CSS v2.0+ -->
<template>
  <TransitionRoot as="template" :show="open">
    <Dialog as="div" class="fixed z-10 inset-0 overflow-y-auto" @close="open = false">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </TransitionChild>

        <!-- This element is to trick the browser into centering the modal contents. -->
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
          <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:p-6">

              <button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click="open = false">
                <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
                <span class="sr-only">Close</span>
                <XIcon class="h-6 w-6" aria-hidden="true" />
                </div>
              </button>

            <div class="sm:flex sm:items-start">
            <div class="flex flex-col">
              <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                  <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead class="bg-gray-50">
                        <tr>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Room
                          </th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Description
                          </th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Type
                          </th>
                          <th scope="col" class="relative px-6 py-3">
                            <span class="sr-only">Enter</span>
                          </th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="room in chatRooms" :key="room.id">
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                              <div class="flex-shrink-0 h-10 w-10">
                                <img class="h-10 w-10 rounded-full" :src="room.image" alt="" />
                              </div>
                              <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">
                                  {{ room.name }}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ room.description }}</div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="[room.is_private === 'Public' ? 'bg-green-100 text-green-800' : room.is_private === 'Private' ? 'bg-red-100 text-red-800' : '']">
                              {{ room.is_private }}
                            </span>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="#" class="text-indigo-600 hover:text-indigo-900">Enter</a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </TransitionChild>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

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

export default {
  props: ['rooms'],
  data: function () {
    return {
        chatRooms: [],
        rooms: [], 
    }
  },
  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>

Answer 1

试试这个：

也许这就是你的问题的原因。

在methods: {}之前添加这段代码并告诉我：

created() {
   this.getRooms();
},

Answer 2

这里的任何人都无法通过提供的信息解决此问题。因此，我以希望对其他人有所帮助的方式输入此答案。

当您执行 v-for sn-p 时，重要的是要记住要提取哪些数据进行处理。就我而言，以下行是问题

<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="[room.is_private === 'Public' ? 'bg-green-100 text-green-800' : room.is_private === 'Private' ? 'bg-red-100 text-red-800' : '']">

room.is_private 是一个布尔值，而不是我想要可视化的数据。因此，通过说 Public 和 Private，我打破了 for 声明。通过将它们更改为 True 和 False，我能够处理 v-for 语句并实际加载要加载的代码。我使用的解决方案如下。请注意，有 2 个版本的 true 和 false。这是因为 Postgres 和 sqlite 都希望看到不同的响应。当它在本地使用“true”时我注意到了这一点，但部署中的 pgsql 不起作用。所以这就是为什么代码是这样的原因

                                                            <div v-if="room.is_private === true" class="rounded-full py-1 px-2 bg-red-100 text-red-800">
                                                                        <span>Private</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === false" class="rounded-full py-1 px-2 bg-green-100 text-green-800">
                                                                        <span>Public</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === 'true'" class="rounded-full py-1 px-2 bg-red-100 text-red-800">
                                                                        <span>Private</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === 'false'" class="rounded-full py-1 px-2 bg-green-100 text-green-800">
                                                                        <span>Public</span>
                                                                </div>

这里的重要一课是确保在遇到请求数据类型错误的代码之前对数据和字段进行抽样。