兄弟組件和父組件的數據注入失敗 - vue3

Question

各位現代輕量級web的朋友們，希望對vue3的菜鳥有幫助。

我在多個子組件之間共享時間表細節，並展示了最好的五個和最差的五個浪費時間的例子。 其中一個組件旨在向組件添加新的時間數據。 具有 @click="$emit" 功能。 不幸的是，它不會影響組件。 我看到它添加了半秒鍾，然后返回默認數據。 不顯示添加的“勒克斯”數據。

因此，我希望你們中的一個巫師能告訴我，我犯了什么愚蠢的錯誤。

應用程序.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'}
         ]
      }
  },

時間細節.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>