javascript - Vuejs：调用 created() 钩子两次

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方法将由base-projects组件的 DOM 上的“单击”触发。