我无法弄清楚如何将参数传递给 Nuxt 3 中的匿名函数。
index.vue:
<template>
<form @submit.prevent="signUpNewsletter()">
<input type="email" placeholder="[email protected]" v-model="userEmail">
<input type="submit" value="Submit">
</form>
</template>
<script setup>
const userEmail = ref('[email protected]')
function signUpNewsletter () {
useAsyncData(
'newsletter',
() => $fetch('/api/sign_up_news', {
method: 'POST', // Post method works
body: {
email: userEmail.value
}
})
)
}
</script>
server/api/sign_up_news.js:
import { createClient } from '@supabase/supabase-js'
export default async (email) => { // can't read the parameter
const SUPABASE_KEY = 'key123'
const SUPABASE_URL = 'url.supabase.co'
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
const { data, error } = await supabase
.from('newsletter')
.insert([{ email }]) // <<< Fails!
return data
};
working:
import { createClient } from '@supabase/supabase-js'
export default async () => {
const SUPABASE_KEY = 'key123'
const SUPABASE_URL = 'url.supabase.co'
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
const { data, error } = await supabase
.from('newsletter')
.insert([{ email: '[email protected]' }]) // <<< Works!
return data
};
你知道如何将参数传递到 Nuxt 3 服务器/api 吗？或者你有资源吗？官方文档目前是空白的。
利用useBody
它在文档中提到：https ://v3.nuxtjs.org/guide/features/server-routes#handling-requests-with-body
你只需要通读
import { createClient } from '@supabase/supabase-js'
export default async (event) => { // can't read the parameter
const body = await useBody(event)
const SUPABASE_KEY = 'key123'
const SUPABASE_URL = 'url.supabase.co'
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
const { data, error } = await supabase
.from('newsletter')
.insert([{ email: body.email }])
return data
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句