Обновление данных из дочернего компонента - Vue.js / Axios / Laravel

Question

Я пытаюсь обновить данные, которые поступают из дочернего компонента в приложении Vue.js Laravel, и по какой-то причине я не могу это сделать прямо сейчас. Возврат, данный инспектором, говорит мне

Создание объекта по умолчанию из пустого значения

Родительский компонент открывает модальный, который является дочерним компонентом, затем информация должна обновляться с помощью метода update (). Может кто-нибудь помочь мне понять, чего мне не хватает?

Это в основном img моей базы данных, чтобы понять, как она структурирована:

Эти методы находятся в моем родительском компоненте Log.vue, и вот как я передаю данные из родительского в дочерний компонент:

<log-edit v-if="editModalOpen" :logId="logId" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'></log-edit>

<td @click="openEdit(log.id,log.user,log.title,log.type,log.description,log.created_at)"><i class="fas fa-edit"></i></td>
<script>


methods:{
 openEdit(id,user,title,type,description,date){
                    this.logId = id;
                    this.logUser = user;
                    this.logTitle = title;
                    this.logType = type;
                    this.logDescription = description;
                    this.logDate = date;
                    this.editModalOpen = true;
                },
}

<script>

Это EditLog.vue, который является дочерним компонентом, получающим данные от родительского элемента выше:

<template>
    <div class="container">
        <div id="overlay">
            <div class="edit-detail-window">
                <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLongTitle">{{logTitle}}</h3>
                        <button type="button" class="close">
                        <i class="fas fa-times" @click="close"></i>
                        </button>
                </div>
                <div id="show-detail-modal-body" class="modal-body">
                    <br>
                    <label>Title:</label>
                    <input class="form-control" type="text" v-model="logTitle">

                    <br>
                    <label>Type:</label>
                    <select v-model="logType" class="form-control" ><br>
                                <option value="" disabled selected>Type</option>
                                <option>Client Update</option>
                                <option>Dev Update</option>
                                <option>Bug</option>
                                <option>Style Fix</option>
                    </select>

                    <br>
                    <label>Description:</label>
                    <textarea class="form-control" cols="30" rows="5" v-model="logDescription"></textarea>

                </div>
                <div class="modal-footer">
                    <button d="log-it" type="button" class="btn btn-circle btn-xl" @click="update(logTitle, logType, logDescription)">
                        <span><b>EDIT</b></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>

import axios from 'axios';

export default {

    name:'EditLog',

    props:['logId','logUser','logTitle','logType','logDescription','logDate'],

    data(){
        return{
            log:{title:'',type:'',description:''},
            errors:{}
        }
    },

    methods:{

        close(){
            this.$emit('closeRequest');
        },

        update(title,type,description){

            this.log.title = title;
            this.log.type = type;
            this.log.description - description;

            window.axios.patch(`/develogger-app/public/api/logs/${this.logId}`,this.$data.log).then((response)=> this.close())
                    .catch((error) => this.errors = error.response.data.errors)

        }

    }
}
</script>

Это журнал маршрутов / api.php

Route::patch('/logs/{id}','LogController@update');

Это функция обновления LogController.php

public function update($id, Request $request){

        $log = Log::find($request->id);
        $log->title = $request->logTitle;
        $log->type = $request->logType;
        $log->description = $request->logDescription;

        $log->save();

    }

Любая подсказка о том, как заставить это работать?

Answer 1

Несколько замечаний, которые я здесь заметил, возможно, слишком велики для комментариев.

Во-первых, вместо передачи всех отдельных свойств log компоненту <edit-log>, может быть проще просто передать весь объект в?

<edit-log :log="log"></edit-log>

Во-вторых, не похоже, что вы привязываете данные реквизита, которые вы отправляете, к <edit-log> к data на этом компоненте. Я не думаю, что вы можете v-моделировать непосредственно в подпорку.

В-третьих, я думаю, что когда вы делаете обновление в компоненте <edit-log>, вам просто нужно передать данные как this.log вместо this.$data.log.

Так что ваш <edit-log> может выглядеть так полностью

<template>
    <div class="container">
        <div id="overlay">
            <div class="edit-detail-window">
                <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLongTitle">{{logTitle}}</h3>
                        <button type="button" class="close">
                        <i class="fas fa-times" @click="close"></i>
                        </button>
                </div>
                <div id="show-detail-modal-body" class="modal-body">
                    <br>
                    <label>Title:</label>
                    <input class="form-control" type="text" v-model="log.title">

                    <br>
                    <label>Type:</label>
                    <select v-model="log.type" class="form-control" ><br>
                                <option value="" disabled selected>Type</option>
                                <option>Client Update</option>
                                <option>Dev Update</option>
                                <option>Bug</option>
                                <option>Style Fix</option>
                    </select>

                    <br>
                    <label>Description:</label>
                    <textarea class="form-control" cols="30" rows="5" v-model="log.description"></textarea>

                </div>
                <div class="modal-footer">
                    <button d="log-it" type="button" class="btn btn-circle btn-xl" @click="update()">
                        <span><b>EDIT</b></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>

import axios from 'axios';

export default {

    name:'EditLog',

    props:['initiaLog'],

    data(){
        return{
            log:this.initialLog,
            errors:{}
        }
    },

    methods:{

        close(){
            this.$emit('closeRequest');
        },

        update(){

            window.axios.patch(`/develogger-app/public/api/logs/${this.logId}`,this.log)
                .then((response)=> this.close())
                .catch((error) => this.errors = error.response.data.errors)

        }

    }
}
</script>

и вы бы назвали инициализировать его так

<log-edit v-if="editModalOpen" :initial-log="log" @closeRequest='close'></log-edit>