Фильтр поиска с использованием Vuejs и Django

Я делаю свою часть поискового фильтра на сайте, используя Django rest-framework и VueJs. Я использовал django-filter. Моя проблема в том, что я не знаю, как установить url или изменить в Vue при изменении данных, например, если я ввожу max-price, url должен быть таким http:/.../api/v1/search/?max_price=150, а когда я проверяю статус is-online на true, url должен быть изменен на http:/.../api/v1/search/?max_price=150&is_online=true. Есть ли какой-нибудь подход для этого? Заранее спасибо

filters.py

from django_filters import rest_framework as filters
from .models import Announcement


class  AnnouncementFilter(filters.FilterSet):
    min_price = filters.NumberFilter(field_name="price", lookup_expr="gte")
    max_price = filters.NumberFilter(field_name="price", lookup_expr="lte")

    class Meta:
        model = Announcement
        fields = ['subcategory', "is_online", "owner"]

views.py

from django_filters import rest_framework as filters
from .filters import AnnouncementFilter

class AnnouncementFilterList(generics.ListAPIView):
    queryset = Announcement.objects.all()
    serializer_class = AnnouncementSerializer
    filter_backends = [filters.DjangoFilterBackend]
    filterset_class = AnnouncementFilter

Search.vue

export default {
    name: "Search",
    data() {
        return {
            announcements: [],
            is_online: false,
            min_price: "",
            max_price: "",
            ...

        }
    },
methods: {
     async search() {
          await axios
             .get(`api/v1/announcements/search/?max_price=${this.max_price}`)
             .then(response => {
                 this.announcements = response.data
                 console.log(response.data)
             })
             .catch(error => {
                 console.log(error)
             })
    }

Вот что я сделал до сих пор...

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