Привет всем, можете помочь с кодом? Пытаюсь сделать так, чтобы

выводились в поля текущие значение для name, age, job. Вот код: <template>
<div class="w-25 mt-2">
<div class="mb-2">
<input type="text" class="form-control" v-model="name" placeholder="name">
</div>
<div class="mb-2">
<input type="number" class="form-control" v-model="age" placeholder="age">
</div>
<div class="mb-2">
<input type="text" class="form-control" v-model="job" placeholder="job">
</div>
<div class="mb-2">
<button class="btn btn-primary">Update</button>
</div>
</div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";

const id = ref(null);
const name = ref(null);
const age = ref(null);
const job = ref(null);

const router = useRouter();

onMounted(() => {
id.value = router.currentRoute.value.params.id;
getPerson(id.value);
});

async function getPerson(id) {

axios.get(/api/people/${id})
.then(res => {
name.value = res.data.name;
age.value = res.data.age;
job.value = res.data.job;
})

}


</script>

<style scoped>

</style>

Не зовсім впевнений, але хіба не потрібно біндити динамічні поля?

Я просто понять пытался как show/update реализовать можно, особо не вникал в тонкости, но там проблема в другом была

Зрозуміло

Я так реализовал, не знаю насколько правильно с точки зрения vue. Вот код: <template> <div class="w-25 mt-2"> <div class="mb-2"> <input type="text" class="form-control" v-model="name" placeholder="name"> </div> <div class="mb-2"> <input type="number" class="form-control" v-model="age" placeholder="age"> </div> <div class="mb-2"> <input type="text" class="form-control" v-model="job" placeholder="job"> </div> <div class="mb-2"> <input @click.prevent="update" type="submit" class="btn btn-primary" value="Update"> </div> </div> </template> <script setup> import {onMounted, ref} from "vue"; import axios from "axios"; import router from "@/router.js"; import {useRoute} from "vue-router"; const name = ref(null) const age = ref(null) const job = ref(null) const route = useRoute() onMounted(() => { getPerson() }) function getPerson() { axios.get(/api/people/ + route.params.id) .then(res => { name.value = res.data.name age.value = res.data.age job.value = res.data.job }) } function update() { axios.patch('/api/people/' + route.params.id , { name: name.value, age: age.value, job: job.value, }) .then(res => { router.push({name: 'person.show'}) }) } </script> <style scoped> </style>

при update делать invalidate или optimistic update