Как правильно реализовать присвоение данных с api в Nuxt?
использую composition api. Как правильно реализовать присвоение данных с api в form?
import {
defineComponent,
reactive,
useContext,
useFetch,
} from '@nuxtjs/composition-api'
export default defineComponent({
components: {
IconUpload,
},
setup() {
const { $axios, params } = useContext()
const form = reactive({
id: 0,
path: '',
image: '',
title: '',
description: '',
meta_title: '',
meta_description: '',
meta_keywords: '',
text: '',
slug: '',
})
useFetch(async () => {
await $axios
.$get(`/v1/admin/page/${params.value.pageId}`)
.then((response) => {
form.id = response.data.id
form.path = response.data.path
form.image = response.data.image
form.title = response.data.title
form.description = response.data.description
form.meta_title = response.data.meta_title
form.meta_description = response.data.meta_description
form.meta_keywords = response.data.meta_keywords
form.text = response.data.text
form.slug = response.data.slug
})
})
function update() {
this.$axios
.$put(`/v1/admin/page/${this.form.id}`, this.form)
.then((response: any) => {
console.log(response.data.message)
})
.catch((error) => {
console.log(error)
})
}
return { form, update }
},
})
</script>