未捕获（承诺）TypeError：无法读取未定义的属性'uid'

Question

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

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

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

未捕获（承诺）TypeError：无法读取未定义的属性'uid'

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');

});

的Controler：

<?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();
    }
}

Uplod.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代码

我在商店方法的控制台中获取uid （视频的唯一ID）但是当我通过单击保存chages按钮更新时，我得到如下错误：

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

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

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

并且在此行中的Upload.vue中，如果我将uid更改为默认值158cfff622e1b7 ，它可以正常工作，即：结果更新

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 this.uid = response.json().data.uid; by this.uid = response.body.data.uid;

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

阅读文档了解更多信息