vue.js 使用后访问我的数据Fetch into serverSupabaseClient

nbysray5 于 12个月前发布在 Vue.js

关注(0)|答案(2)|浏览(94)

我使用nuxt 3与supabase module
我有一个组件“AddIngredients.vue”，我尝试使用

<script setup lang="ts">
const { data } = await useFetch("/api/getAlimentaryProducts")
console.log(data.value.data.length)
</script>

我在/API/getAlimentaryProducts.ts中完美地得到了我想要的东西

import { serverSupabaseClient } from "#supabase/server"

export default eventHandler(async (event) => {
  const supabase = await serverSupabaseClient(event)

  const { data, error } = await supabase.from("alimentary_products").select("id, name")

  return { data, error }
})

但是回到我的组件，我必须写这个来获取我的数据：

console.log(data.value.data.length)

我的数据变量是RefImpl类型x1c 0d1x
有没有更好的方法来获取我的数据，而不是写这个丑陋的data.value.data.length？

vue.js

来源：https://stackoverflow.com/questions/77281753/access-my-data-after-a-usefetch-into-serversupabaseclient

2条答案

按热度按时间

a1o7rhls1#

为了使这段代码更简洁，并避免使用data.value.data.length，您可以直接在设置脚本中解构数据对象，如下所示：

<script setup lang="ts">
import { ref } from 'vue'
import { useFetch } from '@nuxt/http'
const { data } = useFetch("/api/getAlimentaryProducts")
const { data: alimentaryProducts } = data

console.log(alimentaryProducts.length)
</script>

通过解构数据对象并将其重命名为alimentaryProducts，您可以直接以alimentaryProducts.length的形式访问长度，这可以使代码更清晰，可读性更强。

赞(0）回复(0）举报 12个月前

5anewei62#

根据luckygem的回答

const { data: { value: { data: alimentaryProduct } } } = await useFetch("/api/getAlimentaryProducts")

赞(0）回复(0）举报 12个月前

我来回答

vue.js 使用后访问我的数据Fetch into serverSupabaseClient

2条答案

相关问题

热门标签

最新问答