As a newcomer to JS and Vue, I appreciate your patience with my learning curve :)
I've set up a table using two Vue components: a parent (representing the table - orders) and a child (representing the row - order).
Each row in the table has a button that triggers an AJAX call specific to that row. However, I also need the parent table to refresh after this action is completed in order to display updated data.
I believe I should utilize $emit in the child component to communicate the action to the parent, but for some reason, it's not working as expected. Here's the pertinent part of the code snippet:
const order = {
template: `
...// table content
<td><button class="btn btn-default btn-sm" @click="assignAdvisor(id,
selectedOption)">Set Advisor</button></td>
`,
methods: {
// method triggered by the button click
assignAdvisor(id, selectedOption) {
axios.post('url').then(response => {
..// display response message
orders.$emit('refreshAfterUpdate'); // attempted this.$parent.$emit(...) as well
})
},
};
const orders = {
components: { order, },
props: {
orders: {
type: Object,
},
},
mounted() {
var refresh = () => {
axios.get('/admin/ajax/unassigned-orders')
.then(response => {
this.ordersData = response.data;
setTimeout(refresh, 5000);
});
}
refresh();
},
methods: {
refreshAfterUpdate() {
axios.get('/admin/ajax/unassigned-orders')
.then(response => {
this.ordersData = response.data;
console.log(response);
});
},
}
};
new Vue({
render(createElement) {
const props = {
orders: {
type: Object,
},
};
return createElement(orders, { props });
},
}).$mount('#unassignedOrders');
Despite no error messages being displayed, the functionality doesn't seem to be working correctly.
Appreciate any insight or guidance. Thank you!