如何使用表单发布方法获取数据并使用axios和vue js导航至下一条路线

Question

我有一个关于使用vue和axios搜索列表的问题。我的问题是在我用post方法搜索列表后如何获取通过过滤器数据。所以这是我组成部分的一部分。

这是我的搜索类别代码和侧边栏。名称：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上的结果，如果我发布并根据侧边栏选择类别，则示例类别ID：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。