Vuejs: вызов создал () хук дважды

Question

Я создал ловушку для перезагрузки моих данных из базы данных нажатием кнопки:

<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>

Так что работает нормально, но только если я нажму первый раз. Если я нажму второй раз, данные не будут перезагружены во второй раз. Кто-нибудь знает, как решить эту проблему?

Заранее спасибо!

Answer 1

Я предполагаю, что ваши данные загружаются из вашей базы данных с помощью projectService.getAllCompanyProjects(); функция. Поскольку вы хотите перезагрузить свои данные по "клику", я предлагаю вам связать событие "клика" с одним из методов вашего компонента.

<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>

reloadData метод будет вызван "кликом" на DOM вашего base-projects составная часть.