将道具数据从Laravel视图传递到Vue组件

时间:2020-02-25 10:18:26

标签: database laravel vue.js

在我的控制器内,我有一种方法可以根据ID检索思想条目的数据。

public function editEntry($id) {

        $tj_entry = ThoughtJournalEntry::find($id);

        if (auth()->user()->id !== $tj_entry->user_id) {
            return redirect('/dashboard')->with('error', 'Unauthorised Access');
        }

        return view('pages.thoughtjournaledit')->with('tj_entry', $tj_entry);
    }

这是可从我的视图文件thinkjournaledit中访问的信息,但我也希望能够将此数据传递给Vue组件think-journaledit。

@extends('layouts.template3')

@section('content')

<main>  
    {{ Breadcrumbs::render('thoughtjournalentry') }} 
    <div class="container">
        <h1>Edit Entry</h1>
        <thought-journal-edit :test="{{ $tj_entry->id }}"></thought-journal-edit>
    </div> 
</main>                 

@endsection

我认为我可以通过使用prop将该数据从视图文件传递到Vue组件,但是我不确定是否在组件内使用的方式正确。

<script>
    export default {
        props: [
            'test'
        ],
        data() {
            return {
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 
                tjEntry:[],
            }
        },
        mounted() {
            this.created();
        },
        created() {
            axios.get('/thoughtjournal/this.test/get').then(response => {
                this.tjEntry = response.data;
                console.log(response);
            });
        }
    }
</script>

在axios.get('/ thoughtjournal / this.test / get')中,我需要this.test返回思想日记条目的ID。

这也是路线

Route::put('/thoughtjournal/{id}/edit', 'ThoughtJournalEntryController@editEntry');
Route::get('/thoughtjournal/{id}/get', 'ThoughtJournalEntryController@getEntry');

0 个答案:

没有答案