I created a Vue component that constructs the card and within it, I have another component to which I pass data using a prop. Currently, I am using Swal as a popup to add a new project to the database. However, after adding the project, I have to manually refresh the page to see the updated data. The main reason for choosing Vue was to avoid refreshing the page to view updated data, but unfortunately, I haven't been able to solve this issue.
Below is my Projects.vue file:
import ProjectItem from './Projects/ProjectItem.vue';
export default {
name: "Projects",
components: {
ProjectItem
},
data() {
return {
projects: []
}
},
methods: {
getProjects () {
axios.get('/api/projects').then((res) => {this.projects = res.data});
},
addProject() {
// Swal implementation here
}
},
mounted () {
this.getProjects();
}
In the template of my Project.vue, I bind it to ProjectItem like so:
<div class="table-responsive border-top">
<table class="table card-table table-striped table-vcenter text-nowrap">
<!-- Table content -->
<project-item v-bind:projects="projects" />
</table>
</div>
Here is my ProjectItem.vue file:
<template>
<!-- Template content -->
</template>
<script>
export default {
name: "ProjectItem",
props: ["projects"],
}
</script>