Vue Laravel 不显示来自方法的数据
Vue Laravel not showing data from method
我知道我是瞎子，因为我已经断断续续看了 2 天了，我想我只是眼睛盯着真正发生的事情。下面是代码。应该发生的是一组数据应该显示在模态中。我可以在 Web 检查器中将数据视为包含所有字段的“房间”，但它不会填充到 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">​</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>
试试这个：
也许这就是您遇到问题的原因。
在methods: {}之前添加这段代码并告诉我：
created() {
this.getRooms();
},
这里提供的信息不是任何人都可以解决的问题。所以我输入这个答案的方式希望能对其他人有所帮助。
在执行 v-for 代码段时，请务必记住要提取哪些数据进行处理。就我而言，下一行是问题
<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>
这里重要的一课是确保在 运行 之前将数据和字段采样到代码中，从而在请求的数据类型上出错。
我知道我是瞎子，因为我已经断断续续看了 2 天了，我想我只是眼睛盯着真正发生的事情。下面是代码。应该发生的是一组数据应该显示在模态中。我可以在 Web 检查器中将数据视为包含所有字段的“房间”，但它不会填充到 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">​</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>
试试这个：
也许这就是您遇到问题的原因。
在methods: {}之前添加这段代码并告诉我：
created() {
this.getRooms();
},
这里提供的信息不是任何人都可以解决的问题。所以我输入这个答案的方式希望能对其他人有所帮助。
在执行 v-for 代码段时，请务必记住要提取哪些数据进行处理。就我而言，下一行是问题
<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>
这里重要的一课是确保在 运行 之前将数据和字段采样到代码中，从而在请求的数据类型上出错。