Greetings fellow enthusiasts of the modern lightweight web! I find myself in need of assistance with vue3.
I am working on sharing timetable details between multiple child components and showcasing the top five and worst five time wasters as an example. One of the components is supposed to add new time data to the existing components using an @click="$emit" functionality. However, I'm facing an issue where the added "Lux" data appears for a brief moment and then reverts back to the default data without affecting the components.
Therefore, I humbly request one of you skilled individuals to point out the mistake I may have made.
App.vue
<template>
<Top5 :projects="entries"/>
<TimeDetail @add-time-data="newTimeData"/>
</template>
export default {
name: 'App',
methods: {
newTimeData(details) {
this.entries.push(details);
console.log(details);
}
},
data() {
return {
entries: [
{client:'Test', time: 20, date: '2020-09-03'},
{client:'Test2', time: 30, date: '2020-09-04'},
{client:'Test3', time: 45, date: '2020-09-05'}
]
}
},
TimeDetail.vue
<template>
<div class="container-fluid">
<form>
<div class="row">
<div class="col-md-1">
<label for="workdate">Date</label>
<input type="date" class="form-control" id="workdate">
</div>
<div class="col-md-2">
<label for="client">Client</label>
<input type="text" class="form-control" id="client">
</div>
<div class="col">
<label for="workhours">Hours (0.5 - 8)</label>
<input type="range" class="form-control-range" id="workhours" min="0.5" max="8" step="0.5" value="0.5" oninput="this.nextElementSibling.value = this.value">
<output>0.5</output> hours
</div>
<div class="col-md-1">
<br><button type="submit" class="btn btn-primary" @click="$emit('add-time-data',{client:'Lux', time: 66, date: '2020-06-06'})">Submit</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'TimeDetail',
emits: ['add-time-data'],
}
</script>
PS: Unfortunately, Console and vue.js devtools are not functioning properly due to vue.js not being detected error and console failing to display logs :(