JavaScript

Dear friends of the modern lightweight web, I hope you can help a noobie regarding vue3.

I share timetable detail between multiple child components and display the best five and the worst five-time wasters as one example. One of the components is intended to add new time data to the components. With an @click=”$emit” functionality. Unfortunately, it is not affecting the components. I see that it’s added for half a second, and then the default data comes back. Not showing the added “lux” data.

Therefore I hope one of you wizards, can show me, what silly error I 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: Console and vue.js devtools are not working with vue.js not detected error and console not showing log 🙁

Answer

Since the click event is fired by button with type submit you should add prevent modifier in order to prevent the default behavior which is the form submitting :

<button type="submit" ... @click.prevent="$emit('add-time-data',...)">Submit</button>

Data injection on siblings and parent components fail – vue3

Advertisement

Answer