1. خانه
2. مقاله
3. جستجو AJAX به وسیله laravel,vue js

جستجو AJAX به وسیله laravel,vue js

در SearchController.php خود مقادیر زیر را وارد می نماییم.

    
        public function search(Request $request)
        {
            $posts = Post::where('name', $request->keywords)->get();

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

نمایش مقادیر گرفته شده توسط AJAX به شکل زیر می باشد:

    
<template>
    <div>
        <input type="text" v-model="keywords">
        <ul v-if="results.length > 0">
            <li v-for="result in results" :key="result.id" v-text="result.name"></li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },

    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },

    methods: {
        fetch() {
            axios.get('/api/search', { params: { keywords: this.keywords } })
                .then(response => this.results = reponse.data)
        .catch(error => {});
        }
    }
}
</script>
    

با استفاده از lazy می توانیم جستجوی زیباتری داشته باشیم:

    
       <input type="text" v-model.lazy="keywords" v-debounce="300">