兄弟组件和父组件的数据注入失败 - vue3

Question

现代轻量级网络的朋友们，希望你们能帮助vue3的菜鸟。

我在多个子组件之间共享时间表详细信息，并显示最好的五个和最差的五个浪费时间的例子。 其中一个组件旨在向组件添加新的时间数据。具有 @click="$emit" 功能。不幸的是，它不会影响组件。我看到它添加了半秒钟，然后返回默认数据。未显示添加的“勒克斯”数据。

因此，我希望你们中的一个巫师能告诉我，我犯了什么愚蠢的错误。

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：控制台和 vue.js 开发工具无法使用 vue.js 未检测到错误和控制台未显示日志:(

Answer 1

由于点击事件是由submit 类型的按钮触发的，您应该添加prevent 修饰符以防止默认行为是表单提交：

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