未捕获（承诺中）类型错误：无法读取未定义的属性“uid”

Question

我正在使用 laravel 5.4 和 Vue.js 2 将一些信息与文件（视频）一起保存在 DB 中。但是我遇到了这样的错误

错误：http://imgur.com/a/7XGERPUT

http://localhost:8000/videos/null 404 (Not Found)

Uncaught (in promise) TypeError: Cannot read property 'uid' of undefined

NotFoundHttpException in Handler.php line 131:
No query results for model [App\Models\Video].

路线：

Route::group(['middleware'=>['auth']],function(){

    Route::get('/upload','VideoUploadController@index');
    Route::post('/videos','VideoController@store');
    Route::put('/videos/{video}','VideoController@update');


    Route::get('/channel/{channel}/edit','ChannelSettingsController@edit');
    Route::put('/channel/{channel}/edit','ChannelSettingsController@update');

});

控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\VideoUpdateRequest;
use App\Models\Video;
class VideoController extends Controller
{
    public function store(Request $request)
    {
        $uid = uniqid(true);

        $channel = $request->user()->channel()->first(); 

        $video = $channel->video()->create([

            'uid'=>$uid,
            'title'=>$request->title,
            'description'=>$request->description,
            'visibility'=>$request->visibility,
            'video_filename'=>"{$uid}.{$request->extension}",
            ]);
        return response()->json([
            'data' => [
                'uid' => $uid
            ]
        ]);
    }

    public function update(VideoUpdateRequest $request, Video $video)
    {

     //authentication checked here .......


        $video->update([
            'title' => $request->title,
            'description' => $request->description,
            'visibility' => $request->visibility,
            'allow_votes' => $request->has('allow_votes'),
            'allow_comments' => $request->has('allow_comments')
        ]);

        if ($request->ajax()) {
            return response()->json(null, 200);
        }

        return redirect()->back();
    }
}

上传.vue

 <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Example Component</div>

                        <div class="panel-body">
                           <input type="file" name="video" id="video" @change="changfileInputChange" v-if="!uploading">
                           <div id="video-form" v-if="uploading&&!failed">

                           <div class="form-group">
                                <label for="title">Title</label>
                                <input type="" name="" v-model="title" class="form-control">

                           </div>

                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea class="form-control"v-model="description"></textarea>

                           </div>

                            <div class="form-group">
                                <label for="visibility">Visibility</label>
                                <select class="form-control" v-model="visibility">
                                    <option value="private">Private</option>
                                    <option value="public">Public</option>
                                    <option value="unlisted">Unlisted</option>
                                </select>

                           </div>
                               <span class="help-block pull-right">{{saveStatus}}</span>
                             <button class="btn btn-default" type="submit"@click.prevent="update">Save changes</button>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },

        data()
        {
            return{
                uid:null,
                uploading:false,
                uplodComplete:false,
                failed:false,
                title:'unlisted',
                description:null,
                visibility:'private',
                saveStatus:null
            }

        },

        methods:{
            changfileInputChange()
            {
                this.uploading=true;
                this.failed=false;
                this.file=document.getElementById('video').files[0];

                this.storeVideo().then(()=>{

                })
            },

            storeVideo(){
                return this.$http.post('/videos',{
                    title:this.title,
                    description:this.description,
                    visibility:this.visibility,
                    extension:this.file.name.split('.').pop()

                }).then((response)=>{
                    this.uid = response.json().data.uid;
                });
            },
            update() {
                this.saveStatus = 'Saving changes.';

                return this.$http.put('/videos/' + this.uid, {
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility
                }).then((response) => {
                    this.saveStatus = 'Changes saved.';

                    setTimeout(() => {
                        this.saveStatus = null
                    }, 3000)
                }, () => {
                    this.saveStatus = 'Failed to save changes.';
                });
            }
        }
    }
</script>

首先，我将视频连同标题、描述等的默认值与 ajax 请求一起保存到数据库，请参阅 Video.vue 代码

我在控制台中通过 store 方法获得 uid(unique id for video)，但是当我通过单击保存 chages 按钮进行更新时，出现如下错误：

当我在控制器中使用默认 uid 时

public function store(Request $request)
    {
        $uid = '158cfff622e1b7';

       //....some code here
    //finally return $uid
return response()->json([
            'data' => [
                'uid' => $uid
            ]
        ]);
}

如果我将uid 更改为默认158cfff622e1b7，则在Upload.vue 这一行中，它可以正常工作，即：结果已更新

return this.$http.put('/videos/' +'158cfff622e1b7', {
//code

});
    it means i am not getting `uid` ,or something is wrong,please help me      

这里是错误截图：http://imgur.com/a/7XGER

错误：PUT http://localhost:8000/videos/null 404 (Not Found)

Answer 1

我可以看到您正在使用路由模型绑定。

Route::put('/videos/{video}','VideoController@update');

路由模型绑定使用 ID 字段开箱即用。如果您使用不同的密钥，则需要告诉您的模型使用该密钥进行路由模型绑定。

在视频模型中添加

public function getRouteKeyName() {
    return 'uid';
}

更新

在providers/RouteServiceProvider中，在boot()里面添加这个

Route::bind('video', function ($value) {
    return App\Models\Video::where('uid', $value)->first();
});

如果还是不行，就拿视频更新一下吧，老办法

public function update(VideoUpdateRequest $request, $uid)
{
    $video = Video::where('uid', $uid)->first();
    $video->title = $request->title;
    $video->description = $request->description;
    ...
    $video->update();

    if ($request->ajax()) {
        return response()->json(null, 200);
    }

    return redirect()->back();
}

Answer 2

用this.uid = response.body.data.uid;替换这个this.uid = response.json().data.uid;

它必须工作，如果不让我听到的话

阅读Docs了解更多