无法将数据提交到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"属性。