Не работает поисковый фильтр Vue.js/Django(DRF)

Я изучаю DRF по видео, я не могу понять, как получить параметр запроса из vue.js в django, чтобы фильтр работал.

Github автора проекта:

• Джанго: < < < 2> > > https://github.com/SteinOveHelset/djackets_django
< < <
• 5>>>Vue.js: << < 6>> > https://github.com/SteinOveHelset/djackets_vue

Ссылка на видео: https://www.youtube.com/watch?v=Yg5zkd9nm6w&t=4867s

Я ничего не понимаю в этом vue.js , Я просто повторяю код.

На vue.js с другой стороны, страница не меняется, но и ошибок тоже нет.

На стороне django есть ошибки:

"ПОЛУЧИТЬ /api/v1/продукты/поиск/ 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": []})

Приложение.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>

Поиск.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>

Мой github: https://github.com/Viktoriya472/Shop.git

В комментариях упоминалась та же ошибка, и ответ был таким:

убедитесь, что URL-адрес в search endpoint(django product/url.py ), маршрут vue и запрос axios post соответствуют друг другу. проверьте, правильно ли поставлены косые черты в конце. если вы добавите завершающую косую черту в конечную точку api и пропустите ее в запросе axios в поисковом компоненте, вы получите эту ошибку.

Я просмотрел пути, сравнил их с авторским кодом на github, ничего не изменилось.

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