Не приходят данные в поле через v-model в Едит странице

Question

В контроллере передаю юзер через пропс, во вью странице указываю пропс. При рендеринге все данные выходят но только когда что то изменяешь в странице: пишешь что то в поле или делаешь рендеринг. Вот мой едит метод в контроллере и вью страница

public function edit()
{
    $user=Auth::user();
    
    return Inertia::render('Client/UserFamily/UserProfileEdit',[
        'user' => $user,
    ]);
}


    <template>

    <head>
        <title>User | Main Information</title>
    </head>
    <AdminLayout>
        <template #breadcrumbs>
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">User</h1>
                </div>
            </div>
        </template>
        <div class="container-fluid">
            <div class="card card-primary">
                <form method="post" @submit.prevent="submit">
                    <!-- <pre>{{ user }}</pre> -->

                    <div class="mb-3">
                        <label for="name" class="form-label">Имя</label>
                        <input v-model="user.name" type="text" class="form-control" id="name" required />
                    </div>
                    <div class="mb-3">
                        <label for="name" class="form-label">Фамилия</label>
                        <input v-model="user.surname" type="text" class="form-control" id="name" required />
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Электронная почта</label>
                        <input v-model="user.email" type="email" class="form-control" id="email" required />
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">Телефон</label>
                        <input v-model="user.phone" type="text" class="form-control" id="name" required />
                    </div>
                    <div class="mb-3">
                        <label for="sex" class="form-label">Пол</label>
                        <select v-model="user.sex" class="form-control" id="sex" required>
                            <option :value="0">Женский</option>
                            <option :value="1">Мужской</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="country" class="form-label">Страна</label>
                        <select v-model="user.country" class="form-control" id="country" required>
                            <option v-for="country in countries" :key="country.name" :value="country.name">
                                {{ country.name }}
                            </option>
                        </select>
                    </div>

                    <div class="card-footer">
                        <button type="button" class="btn btn-primary mr-1" @click.prevent="updateProfile()">
                            Сохранить
                        </button>
                        <button type="button" class="btn btn-danger" @click.prevent="back()">
                            Назад
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
    </template>
    <script>
    import AdminLayout from '../../../Layouts/AdminLayout.vue';
    import { Link, Head } from "@inertiajs/inertia-vue3";
    import Pagination from "../../../Components/Pagination.vue";
    import ValidationError from "../../../Components/ValidationError.vue";
    
    export default {
        components: {
            AdminLayout,
            Link,
            Pagination,
            ValidationError,
            Head
        },
        props: ["user", "countries"],
        data() {
            return {
            }
        },
        created() {
            this.$store.dispatch('fetchUser');
        },
        computed: {
            userData() {
                return this.$store.getters.getUserData.user;
    
            }
        },
            // watch: {
        //     user: {
        //         handler(newUser) {
        //             console.log("User updated:", newUser);
        //         },
        //         deep: true,
        //         immediate: true
        //     }
        // },

    mounted() {
        console.log("Полученные данные:", this.user);
    },
    // mounted() {
    //     console.log("Selected country:", this.user.country); 
    //     console.log("Countries list:", this.countries);
    // },
    methods: {
        updateProfile() {
            this.$inertia.put(route('profile.update'), this.form)
                .then(() => {
                    this.$inertia.reload(); 
                })
                .catch(error => {
                    console.error(error);
                });
        },

    },
};
</script>

Answer 1

У вас компонент отслеживает изменение user. Но изменение user.name, например, не является изменением user. Можно либо навесить дополнительное отслеживание (что, впрочем считается плохим стилем):

watch {
    'user.name': function(){},
    'user.surnamename': function(){},
    ...
}

либо передавать в компонент сами обрабатываемые поля:

    props: ["username", "usersurname", ..., "countries"]

БЛОГ НА HUSL

Не приходят данные в поле через v-model в Едит странице

Ответы (1 шт):