無法將資料提交至Vue專案的控制台

Question

我正在嘗試使用Bootstrap-Vue庫中的表單來測試Vue中的一個表單。 我為表單建立了一個事件（submit），並為此事件添加了一個函數（addText）。 然後，我為這個函數建立了一個方法，告訴它將我的輸入資料記錄到控制台，但是當我按下「儲存」按鈕並進入控制台時，沒有任何記錄。

在Materialize中，這個方法曾經有效，所以我想知道錯誤是否出現在Bootstrap表單中。

非常感謝任何幫助。

<template>
<b-container fluid>
    <h2>为此部分添加或编辑内容</h2>
      <b-form-group @submit="addText">
          <div class="fieldHeadline">
              <label for="headline">添加标题</label>
              <b-form-input type="text" name="headline" v-model="headline"></b-form-input>
          </div>
          <div class="fieldSecodnaryHeadline">
              <label for="secondaryHeadline">添加副标题</label>
              <b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
          </div>
          <div class="fieldText">
              <label for="text">添加文本</label>
              <b-form-input type="text" name="text" v-model="text"></b-form-input>
          </div>
          <b-button variant="success">保存</b-button>
      </b-form-group>
</b-container>
</template>
<script>
export default {
    name: 'NewsSectionCreate',
    data() {
        return {
            headline: null,
            secondaryHeadline: null,
            text: null
        }
    },
    methods: {
        addText(){
            console.log(this.headline, this.secondaryHeadline, this.text)
        }
    }
}
</script>

Answer 1

b-form-group不是表單，而是用來結構化標籤和輸入框的佈局，為了提交這些輸入框的內容，你需要將b-form-group 標籤包裹在一個b-form元件中，並且加上@submit事件：

<b-form @submit="addText">
  <b-form-group >
      <div class="fieldHeadline">
          <label for="headline">添加标题</label>
          <b-form-input type="text" name="headline" v-model="headline"></b-form-input>
      </div>
      <div class="fieldSecodnaryHeadline">
          <label for="secondaryHeadline">添加副标题</label>
          <b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
      </div>
      <div class="fieldText">
          <label for="text">添加文本</label>
          <b-form-input type="text" name="text" v-model="text"></b-form-input>
      </div>
      <b-button type="submit" variant="success">保存</b-button>
  </b-form-group>
 </b-form->

不要忘記在b-button元件中加入type="submit"屬性。