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!

Answer 1

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.