Question

如何使用vue js和laravel获取数据。我已经创建了vue组件和控制器。

这是我的数据库表结构

<script>
export default {

    data(){
        return {
            kudos : []
        }
    },
    created(){
        axios.get('./api/kudos')
        .then(response => this.kudos = response.data);
    }
}
</script>

我需要做的是使用vuejs将数据库数据提取到刀片文件中。有人可以一步一步指导我吗？

控制器
Vue组件
刀片文件

Answer 1

我认为您正在寻找类似的东西？

控制器：

public function searchDatabase( Request $request )
{
    $foo = DB::table('bar')
        ->where([
            ["description", 'LIKE', "%{$request->input('query')}%"]
        ])
        ->limit(5)
        ->get();

    return response()->json($foo);
}

YourComponent.vue

<template>
    <div id="wrapper">

        <div class="input-group">
            <input type="text" placeholder="Search database.." v-model="query" v-on:keyup="autoComplete" class="form-control">
        </div>

        <div class="panel-footer" v-if="results.length">
            <table class="table table-sm">
                <tr v-bind:key="result" v-for="result in results">
                    <td> {{ result.description }} </td>
                </tr>
            </table>
        </div>

    </div>
</template>

<script>
    export default{
        data(){
            return {
                query: '',
                url: '/search/blade/route',
                results: []
            }
        },
        methods: {
            autoComplete(){
                this.results = [];
                if(this.query.length > 2){
                    axios.get('/api/kudos', {params: {query: this.query}}).then(response => {
                        this.results = response.data;
                    });
                }
            }
        }
    }
</script>

search.blade.php

<your-component></your-component>

Answer 2

在响应中添加数据名称

return [
    'router' => [
        'routes' => [
            'landingpage' => [
                'type' => Segment::class,
                'options' => [
                    'route' => '/landingpage[/:action/:id]',
                    'constraints' => [
                        'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
                        'id' => '[a-zA-Z0-9_-]*'
                    ],
                    'defaults' => [
                        'controller' => Controller\LandingPageController::class,
                        'action' => 'index'
                    ]
                ],
                'may_terminate' => true,
            ]
        ]
    ],
    'controllers' => [
        'factories' => [
            Controller\LandingPageController::class => LandingPageControllerFactory::class
        ]
    ],
    'service_manager' => [
        'invokables' => [
            'LandingPage\Service\LandingPageService' => 'LandingPage\Service\LandingPageService'
        ]
    ]
];

如何使用Vue Js Laravel获取数据

2 个答案: