Question

我有一个适用于ajax的搜索。如果用户单击搜索结果之一，则他会进入新页面。现在，如果他在浏览器UI上弹回，他将返回搜索。但是，输入的值未保存，搜索为空。我想保留价值。

在vue.js中对搜索进行编程：

<template>
    <div>
        <div class="row">
            <div class="col-12">
                <div class="card no-shadow-card mb-2">
                    <div class="card-header primary-color white-text">
                        <div class="d-flex justify-content-between">
                            <span>Filter</span>
                            <div>
                                <a href="javascript:void(0)" class="card-toggle-body-visibility white-text"><i
                                        class="fa fa-chevron-up rotated-icon" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-row mb-4">
                            <div class="col-md-6 mb-1">
                                <!-- First name -->
                                <input type="text" id="vacancieName" data-reset="filter"
                                       class="form-control" placeholder="Name der Stellenanzeige" v-model="name">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="company">
                                    <option value="">Unternehmen</option>
                                    <option v-for="ownCompany in ownCompanies" :value="ownCompany.id" v-text="ownCompany.title"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="job">
                                    <option value="" disabled>Beruf Auswählen</option>
                                    <option v-for="avalibleJob in avalibleJobs" :value="avalibleJob.id" v-text="avalibleJob.name"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                        </div>
                        <div class="col-12 float-right">
                            <button @click.prevent="getVacancies" type="button" class="btn btn-sm btn-light-blue">
                                Suchen
                            </button>
                            <button @click="resetFilter" type="button" class="btn btn-sm btn-unique">
                                Zurücksetzen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <vacancie-index-result-componment v-for="vacancie in vacancies" v-bind:vacancie="vacancie"
                                              :key="vacancie.id"></vacancie-index-result-componment>
        </div>
    </div>
</template>

<script>
    import VacancieIndexResultComponentComapany from './VacancieIndexResultComponentCompany.vue'

    export default {
        name: 'VacancieIndexComponentCompany',
        components: {
            'vacancie-index-result-componment': VacancieIndexResultComponentComapany,
        },
        data() {
            return {
                avalibleJobs: [],
                ownCompanies: [],
                vacancies: [],
                name: '',
                company: '',
                job: ''
            }
        },
        methods: {}//Some Axios methods to get the results
    }
</script>

Answer 1

有两种方法可以解决您的问题

使用对话框处理您的新页面，位于 <body></body>或您的根元素，它减少了要解析的代码。它会保存代码在一个组件中
无论怎么说，最好的方法是使用vue-route系统，使用<keep-alive></keep-alive>标签来缓存组件，并且您会看到该值仍然存在。您也可以在无论如何，开发工具。

单击链接后如何在输入中保存价值？

1 个答案: