Методы в созданном хуке не вызываются при начальной загрузке страницы - PullRequest
Новая
       3

Методы в созданном хуке не вызываются при начальной загрузке страницы

0 голосов
/ 07 февраля 2020

Когда я делаю логин и перенаправляю на домашнюю страницу, тогда страница и компонент загружаются, но методы внутри created ловушки не вызываются, и если я обновляю sh страницу, то она работает нормально.

HomeList. vue

<template>
<section>
<v-container>
  <v-row justify="end">
        <v-col cols="12" sm="4">
            <v-text-field
              label="Search by home name"
              single-line
              solo
              v-model="search"
            >
            </v-text-field>
        </v-col>
    </v-row>
    <v-row justify="start">
      <v-toolbar-title 
        class="grey--text text--darken-4 font-weight-black my-5 ml-12"
        >
        Homes List
      </v-toolbar-title>
      <v-spacer />
       <v-btn 
        class="grey--text text--darken-4 font-weight-black my-5 ml-12"
        v-on:click="refresh_home_list"
        >
        Refresh
      </v-btn>
    </v-row>
    <paginate
        name="searchQuery"
        :list="searchQuery"
        :per="12"
    >
    <v-row justify="center">
         <v-col cols="6" sm="4" v-for="home in paginated('searchQuery')"
     :key="home.id">
            <v-img
                class="white--text align-end img-rounded"
                height="150" width="150"
                contain
                v-bind:src="image_url(home.photo)"
            >
            </v-img>
            <p> {{home.name}} </p>
        </v-col>

    </v-row>
    </paginate>
    <paginate-links
        for="searchQuery"
        :show-step-links="true"
    ></paginate-links>
</v-container>
</section>
</template>
<script>

import { mapGetters,  mapActions } from 'vuex'
 export default {
 name: 'home',
 components: {
  },
  data () {
    return {
        homes: '',
        paginate: ['searchQuery'],
        search: '',
    }
  },
  computed: {
   ...mapGetters([
        'allHomes',
    ]),
    searchQuery (){
      if(this.search){
      return this.homes.filter((item)=>{
        return item.name.startsWith(this.search);
      })
      }else{
        return this.homes;
      }

  }

 },
 created() {
    this.get_home_list(),
    this.homes = this.allHomes;
},
methods: {
    ...mapActions([
        'get_home_list',
        'refresh_home_list',
    ]),
    image_url: function(image) {
      return 'https://ocrb.johnsoncaregroup.com/images/' + image
    }
},
watch: {
allHomes() {
  this.homes = this.allHomes;
}
}
}
</script>
  <style lang="scss">
   ul {
    list-style-type: none;
    padding: 0;
 }

 li {
   display: inline-block;
   margin: 0 10px;
 }
 .paginate-links.items {
   user-select: none;
   a {
    cursor: pointer;
   }
  li.active a {
   font-weight: bold;
   }
   li.next:before {
     content: ' | ';
     margin-right: 13px;
     color: #ddd;
   }
    li.disabled a {
      color: #ccc;
      cursor: no-drop;
    }
   }

   a {
    color: #42b983;
  }
  </style>
...