Как получить данные с помощью метода post form и перейти к следующему маршруту с помощью axios и vue js

Question

У меня есть вопрос о поиске в списке с помощью Vue и Axios. Мой вопрос - как получить данные фильтра пропусков после того, как у меня появилось сообщение для поиска в списке с помощью метода записи. Так что это моя часть компонентов.

Это мой код категории поиска и боковая панель. Название: Sidebar.vue

<template>
    <div class="col-md-3 col-sm-4">
        <div class="filter-sidebar">
            <div class="col-md-12 form-title">
                <h2>Temukan aplikasi berdasarkan</h2>
            </div>
            <form id="search" role="form" class="" @submit.stop.prevent="searchCatForm" method="post">
                <div class="col-md-12 form-group category">
                    <label class="control-label" for="category">Kategori Aplikasi</label>
                    <select id="category" name="category" class="form-control" v-model="selectcategory.category">
                        <option v-for="category in categories" :key="category.id" :value="category.id">{{category.category_name}}</option>
                    </select>
                </div>
                <div class="col-md-12 form-group button">
                    <button type="submit" class="btn tp-btn-primary tp-btn-lg btn-block">Cari</button>
                    <router-link :to="{name: 'listings'}" class="btn btn-reset"><i class="fa fa-repeat"></i>Reset</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {API_BASE} from '../Config/config'

    export default {
        name: 'Sidebar',
        data() {
            return {
                categories: [],
                selectcategory: {}
            }
        },
        created() {
            let url = `${API_BASE}/listings`
            axios.get(url)
                .then(response => {
                    this.categories = response.data.categories
                })
                .catch(error => {
                    console.log(error)
                })
        },
        methods: {
            searchCatForm() {
                let urlpost = `${API_BASE}/listings/search/filter`
                console.log('submiting')
                axios.post(urlpost, this.selectcategory)
                    .then(response => {
                        this.$router.push({name: 'searchlistingcategory'})
                        console.log('successfull')
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    }
</script>

И это мой компонент результатов поиска и навигации после публикации. Имя: SearchListingCategory.vue

<template>
    <div>
        <div class="tp-page-head-search-listings">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="page-header">
                            <h1>Pencarian Listing Berdasarkan Kategori</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tp-breadcrumb">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <ol class="breadcrumb">
                            <li><router-link :to="{name: 'home'}">Beranda</router-link></li>
                            <li class="active">Pencarian Listing</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="container">
                <div class="row">
                    <sidebar></sidebar>
                    <div class="col-md-9 col-sm-8">
                        <div class="row">   
                            <div class="col-md-4 vendor-box" style="min-height:410px;">
                                <div class="vendor-image"> 
                                    <a href="">
                                        <img :src="" class="img-responsive">
                                        <img :src="urllisting" class="img-responsive">
                                    </a>
                                </div>
                                <div class="vendor-detail">
                                    <div class="caption">
                                        <h2>
                                            <router-link :to="{name: 'singlelisting', params: { listing_slug: listing.listing_slug, id: listing.id }}" class="title">
                                                {{listing.title}}
                                            </router-link>
                                        </h2>
                                        <p class="location center" style="min-height:42px;"></p>
                                        <p class="location center" style="min-height:42px;"></p>
                                        <p align="right">
                                            <span>
                                                <i class="fa fa-eye"></i>  
                                            </span>
                                        </p>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import {API_BASE} from '../Config/config'
    import Sidebar from '../Layouts/Sidebar.vue'
    
    export default {
        name: 'Search-Category-Listing',
        components: {
                Sidebar
            },
        data() {
            return {
                searchlistingcategory: {
                    filter: []
                },
                urllisting: 'http://localhost:8000/upload/logo-default.png',
            }
        },
    }
</script>

Это мой компонент маршрута

{
    path: '/listings/search/filter',
    name: 'searchlistingcategory',
    component: SearchListingCategory,    
},

И это результаты в браузере vue devtools, если я публикую и выберу категорию на боковой панели, пример идентификатора категории: 3. :

Теперь, как и каким способом я могу получить эти данные, переместить все результаты данных в компонент searchlistingcategory? Спасибо

Answer 1

Добавьте реквизит к Search-Category-Listing

export default {
    name: 'Search-Category-Listing',
    props: ['listing']
    components: {
            Sidebar
        },
    data() {
        return {
            searchlistingcategory: {
                filter: []
            },
            urllisting: 'http://localhost:8000/upload/logo-default.png',
        }
    },
}

и отправлять данные при нажатии на маршрут.

this.$router.push({name: 'searchlistingcategory', params: {listing: response.data.listings } }})

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

{
 path: '/listings/search/filter',
 name: 'searchlistingcategory',
 component: SearchListingCategory,    
 props: true
},

Обратите внимание, что при использовании props: true к маршруту можно перейти только с использованием name, а не с помощью path.