从子组件更新数据 - Vue.js/Axios/Laravel

Posted 2023-02-22

【中文标题】从子组件更新数据 - Vue.js/Axios/Laravel

【英文标题】：Update Data from Child component - Vue.js/Axios/Laravel

【发布时间】：2019-04-06 17:23:55

【问题描述】：

我正在尝试更新来自 Vue.js Laravel 应用程序上的子组件的数据，但由于某种原因，我无法直接工作。检查员给出的回报告诉我

从空值创建默认对象

父组件打开一个modal，它是一个子组件，然后必须通过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();

    

任何关于如何使它工作的线索？

【参考方案1】：

我在这里注意到的几点可能太大而无法评论。

首先，不是将log 的所有单独属性都传递给<edit-log> 组件，而是将整个对象传递进去可能更容易？

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

其次，您似乎没有将发送到<edit-log> 的道具数据绑定到该组件上的data。我认为您不能直接对道具进行 v-model。

第三，我认为你在 <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>