Search filter not working Vue.js/Django(DRF)

I'm learning DRF from video, I can't figure out how to get the query parameter from vue.js in django so that the filter works.

Github of the project author:

• Django: https://github.com/SteinOveHelset/djackets_django
• Vue.js: https://github.com/SteinOveHelset/djackets_vue

Link to video: https://www.youtube.com/watch?v=Yg5zkd9nm6w&t=4867s

I don't understand anything about vue.js, I'm just repeating the code.

On the vue.js side, the page doesn't change, but there are no errors either.

There are errors on the django side:

"GET /api/v1/products/search/ HTTP/1.1" 405 5711

"POST /api/v1/products/search/ HTTP/1.1" 400 5714

views.py

@api_view(['POST'])
def search(request):
    query = request.data.get('query', '')
    if query:
        products = Product.objects.filter(Q(name__icontains=query) |
                                          Q(description__icontains=query))
        serializer = ProductSerializer(products, many=True)
        return Response(serializer.data)
    else:
        return Response({"products": []})

App.vue

<form method="get" action="/search">
    <div class="field has-addons">
        <div class="control">
            <input type="search" class="input" placeholder="What are you looking for?" name="query">
        </div>
        <div class="control">
            <button class="button is-success">
                <span class="icon">
                    <i class="fas fa-search"></i>
                </span>
            </button>
        </div>
    </div>
</form>

Search.vue

<template>
    <div class="page-search">
        <div class="columns is-multiline">
            <div class="column is-12">
                <h1 class="title">Search</h1>
                <h2 class="is-size-5 has-text-grey">Search term: "{{ query }}"</h2>
            </div>

            <ProductBox 
                v-for="product in products"
                v-bind:key="product.id"
                v-bind:product="product" />
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import ProductBox from '@/components/ProductBox.vue'

export default {
    name: 'Search',
    components: {
        ProductBox
    },
    data() {
        return {
            products: [],
            query: ''
        }
    },
    mounted() {
        document.title = 'Search'

        let uri = window.location.search.substring(1)
        let params = new URLSearchParams(uri)

        if (params.get('query')) {
            this.query = params.get('query')

            this.performSearch()
        }
    },
    methods: {
        async performSearch() {
            this.$store.commit('setIsLoading', true)

            await axios
                .post('/api/v1/products/search/', {'query': this.query})
                .then(response => {
                    this.products = response.data
                })
                .catch(error => {
                    console.log(error)
                })

            this.$store.commit('setIsLoading', false)
        }
    }
}
</script>

My github: https://github.com/Viktoriya472/Shop.git

The comments mentioned the same error, and the answer was:

make sure the url in search endpoint(django product/url.py ), and vue route as well as axios post request is consistent. check the trailing slashes. if you put a trailing slash in api endpoint and you're missing one in axios request in Search component, you will get this error.

I looked at the paths, compared them with the author's code on github, nothing has changed.

Вернуться на верх