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();函数从数据库中重新加载了您的数据。由于您要在“ click”上重新加载数据，因此建议您将“ click”事件绑定到您的一种组件方法。

<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上的“单击”触发。

Vue.js：两次调用created（）钩子

1 个答案: