如何使用 Vue Js laravel 获取数据答案

【问题标题】：How to Fetch data using Vue Js laravel如何使用 Vue Js laravel 获取数据
【发布时间】：2019-10-19 20:46:15
【问题描述】：

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

这是我的数据库表结构

<script>
export default {

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

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

控制器
Vue 组件
刀片文件

【问题讨论】：

您还有其他代码要显示吗？

标签： laravel vue.js

【解决方案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>

【讨论】：

你的searchDatabase 函数实际上并没有输出任何东西。
哎呀！很好的捕捉@ceejayoz。我刚刚为这个例子消毒了一些现有的代码，忘记添加了。

【解决方案2】：

在您的回复中添加您的数据名称

 <script>
   export default {

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

【讨论】：