jeudi 11 avril 2019

Laravel and VueJS - make a searchbar (laravel request route in a Vue view)

I am trying to make a search bar with results using laravel and vuejs. And once again, i am a bit lost here... I see how to send results to a vue through props, but not how to do the opposite.

I have my laravel method giving me results:

public function search(Request $request)
    {
        $query = $request->query('query');
        $results = (SELECT MY_REQUEST)->where('nom','LIKE','%'.$q.'%')->get());
        if(count($results) > 0 )
            return view('vue/liste', compact('results'));
    }

I also have my vue components: navbar, results and results Now, I have no idea how to get these laravel results in my search result in vuejs...

in vuejs I would like to use this url '/user/find?q=%QUERY%'

Here is my searchbar

<template>
    <div class="container">
            <input v-model="query" type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-primary" @click="searchResults" @keyup.enter="searchResults" type="button">
                    Search
                </button>
            </div>
    </div>
</template>

<script>
    export default {
        name: "Searchbar",
        data() {
            return {
                query: '',
            }
        },
        methods: {
            searchResults() {
                //here i would like to call this url '/user/find?q=%QUERY%'
            }
        }
    }
</script>

Here is my results vue

<template>
    <div class="container">
        <div v-for="result in results">
            <result :result="result"></result>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import result from '../components/Result'

    export default {
        name: "Results",
        components: {
            result
        },
        mounted() {
            //get results
        }
    }
</script>

I am a bit stuck here... i guess it's very simple but I can't get it. Could you please give me some tips? Thanks a lot!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire