Vuejs: call created() hook twice

Question

I created a hook to reload my data from the database on a button click:

<template>
  <base-projects :projects="projects" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  created() {
    projectService.getAllCompanyProjects();
  },

};
</script>

So that works fine, but only if I click the first time. If I click a second time, it doesn't reload the data a second time. Does anyone know how to fix that issue?

Thank you in advance!

`created` hook will be called once, when the component is created. If you want to reload your data on click you should call a component `method` on click. Could you provide your component code to solve this out? — charlycou, Feb 25 '19 at 13:47
@charlycou is it possible to destroy the hook in the created hook? — max, Feb 25 '19 at 13:50
Why do you want to destroy it. If you need to destroy this hook it is probably because you don't need it since it is triggered once when your component is created. Edit your post with some code or provide sandbox to reproduce your issue. — charlycou, Feb 25 '19 at 13:55

charlycou · Answer 1 · 2019-02-25T14:45:24.203

0

I assume that your data are reloaded from your database using projectService.getAllCompanyProjects(); function. Since you want to reload you data on "click" I suggest you to bind the "click" event to one of your component method.

<template>
  <base-projects :projects="projects" @click.native="reloadData" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  methods: {
    reloadData() {
      projectService.getAllCompanyProjects();
    }
  }    
};
</script>

The reloadData method will be triggered by a "click" on the DOM of your base-projects component.

edited Feb 25 '19 at 14:45

answered Feb 25 '19 at 14:11

charlycou

1,778
13
37

base-projects component is not the button, so the method got not called – max Feb 25 '19 at 14:40
I updated the code using `.native`. If this is not working for your use case you need to update your post with the component from which your event should be fired. – charlycou Feb 25 '19 at 14:47

Vuejs: call created() hook twice

1 Answers1