Currently, I am delving into the world of Vue JS. I am in the process of creating a basic app using Laravel & Vue JS just for practice purposes.
I am on the lookout for a solution that would enable my Vue Component to reflect any changes associated with Vue methods.
Here's a snippet from my code:
<template>
<div v-for="user in users" :key="user.id">
{{ user.name }}
</div>
</template>
Script:
export default {
data() {
return {
users: {},
form: new Form({
name: '',
email: '',
password: '',
password_confirmation: ''
})
}
},
methods: {
createUser() {
this.form.post('api/user')
.then(response => {
// Success
fire.$emit('afterCreate');
})
.catch(error => {
// Error
});
},
loadUsers() {
axios.get('api/user').then(({ data }) => (this.users = data.data));
}
},
created() {
this.loadUsers();
fire.$on('afterCreate', () => {
this.loadUsers();
});
}
}
The code above functions well. For example, upon adding a new user, it updates the list of users.
However, my goal is to have the Vue component update itself when there are modifications made to the users table in the database. Whether someone inserts, updates, or deletes a user from another device, I want those updates reflected on my screen.
That's the gist of it!