Когда я нажимаю на хлебную крошку, она не отображает то, что только что отображалось там раньше ... почему это? - PullRequest
Новая
       34

Когда я нажимаю на хлебную крошку, она не отображает то, что только что отображалось там раньше ... почему это?

0 голосов
/ 16 апреля 2019

Я работаю над поиском недвижимости для приложения.

После поиска свойства будет отображаться таблица результатов поиска свойств, а хлебные крошки в верхней части страницы будут выглядеть следующим образом: Dasboard / Property Search.

На столе вы можете нажать на номер ссуды и перейти на страницу с подробностями ссуды, которая теперь заставит панировочные сухари выглядеть следующим образом: Dashboard / Property Search / Loan Detail.

Теперь, когда я пытаюсьчтобы вернуться, нажав на кнопку поиска недвижимости, ничего не отобразится.Просто пустой компонент.

Я хочу, чтобы компонент результатов поиска свойств по-прежнему отображался после нажатия на странице сведений о ссуде и затем щелчка по хлебной крошке, чтобы вернуться к компоненту результатов, но я не могу понять, как это сделать.

Я пытался использовать компонент, но не смог заставить его работать.Я думал, что мне нужно что-то вроде синглтона, но я не смог заставить это работать.Я также попытался возиться с роутером, но не смог понять это.

Компонент поиска недвижимости: 

<template>
  <form @submit.prevent="submitSearch">
    <div class="search-bar-pad white">
      <b-input-group>
        <b-form-input v-model="searchCriteria" size="sm" type="text"></b-form-input>
        <b-input-group-append>
          <b-btn type="submit" size="sm" variant="danger">
            <i class="fa fa-search" aria-hidden="true"></i>
          </b-btn>
        </b-input-group-append>
      </b-input-group>
    </div>
  </form>
</template>




<script>
export default {
  name: "PropertySearch",
  data() {
    return {
      searchCriteria: ""
    };
  },
  methods: {
    submitSearch() {
      let search = {
        search: this.searchCriteria
      };
      this.$store.dispatch("toggleLoading", true);
      this.$store.dispatch("searchProperties", search);
      this.$router.push("/PropertySearch");
    }
  }
};
</script>

Компонент PropertySearchResults: 

<template>
  <div class="animated fadeIn">
    <b-card class="min-height-8" template slot="header">
      <div slot="header">Property Search Results</div>
      <b-container fluid class="px-0 py-0">
        <div v-if="results.length > 0" class="recordBar animated fadeIn">
          <div class="counter float-right">
            <span class="val">{{ results.length || 0 }}</span> Record(s)
          </div>
        </div>
        <loading-spinner :show="loading"></loading-spinner>
        <div v-if="loading == false && results.length == 0">
          <b-alert show class="text-center">No Records Found</b-alert>
        </div>
        <b-table
          v-if="results.length > 0"
          table
          striped
          bordered
          hover
          class="animated fadeIn"
          :items="results"
          :fields="fields"
          :currentPage="currentPage"
          :per-page="perPage"
        >
          <template slot="loanNumber" slot-scope="data">
            <router-link
              :to="{ name: 'Loan', params: { loanId: String(data.item.loanId)}}"
            >{{data.item.loanNumber}}</router-link>
          </template>
        </b-table>
        <b-pagination
          v-if="results.length > 10"
          limit="10"
          class="mt-5"
          :total-rows="results.length"
          :per-page="perPage"
          v-model="currentPage"
        />
      </b-container>
    </b-card>
  </div>
</template>



<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      results: [],
      loading: true,
      currentPage: 1,
      perPage: 15,
      fields: [
        { key: "loanId", label: "Loan ID", sortable: "true" },
        { key: "workorderNumber", label: "WO Number", sortable: "true" },
        { key: "dateOrdered", label: "Date Ordered", sortable: "true" },
        { key: "loanNumber", label: "Loan Number", sortable: "true" },
        { key: "loanType", label: "Loan Type", sortable: "true" },
        { key: "address1", label: "Street", sortable: "true" },
        // { key: "address2", label: "Address 2", sortable: "true" },
        { key: "city", label: "City", sortable: "true" },
        { key: "state", label: "State", sortable: "true" },
        { key: "zip", label: "Zip", sortable: "true" },
        { key: "clientCode", label: "Client Code", sortable: "true" },
        { key: "clientName", label: "Client Name", sortable: "true" }
      ]
    };
  },
  created() {
    this.$store.watch(
      state => {
        return this.$store.state.currentlyLoading;
      },
      (newVal, oldVal) => {
        this.loading = newVal;
      }
    );

    this.$store.watch(
      state => {
        return this.$store.state.searchResults;
      },
      (newVal, oldVal) => {
        this.results = newVal;
      }
    );
  }
};
</script>

Раздел маршрутизатора: 

 routes: [{
      path: '/',
      redirect: '/dashboard',
      name: 'Dashboard',
      component: DefaultContainer,
      children: [{
          path: '/dashboard',
          name: '', 
          component: Dashboard,
          meta: {
            requiresAuth: true
          }
        },
        {
          path: "/PropertySearch",
          name: "Property Search",
          component: Container,
          children: [{
              path: '/',
              name: '',
              component: PropertySearchResults
            },
            {
              path: '/LoanDetail/:loanId',
              name: 'Loan',
              component: LoanDetail
            }
          ]
        }

Магазин: 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex, axios)


export const store = new Vuex.Store({
  state: {
    searchResults: [],
    currentlyLoading: false
  },
  mutations: {
    UPDATE_SEARCH_RESULTS(state, payload) {
      state.searchResults = payload;
    },
    TOGGLE_LOADING(state, payload) {
      state.currentlyLoading = payload;
    }
  },
  actions: {
    searchProperties({
      commit
    }, searchValue) {
      axios
        .post("/search/property", searchValue)
        .then(function (res) {
          commit('UPDATE_SEARCH_RESULTS', res.data);
          commit('TOGGLE_LOADING', false)
        })
        .catch(function (err) {
          commit('TOGGLE_LOADING', false)
          console.log(err);
        })
    },
    toggleLoading({
      commit
    }, bool) {
      commit('TOGGLE_LOADING', bool);
    }
  }
})
...