Daten können nicht an die Konsole des Vue-Projekts übermittelt werden

Question

Ich versuche, ein Formular in Vue mit Formularen aus der Bootstrap-Vue-Bibliothek zu testen. Ich habe ein Ereignis für das Formular erstellt (submit) und eine Funktion für dieses Ereignis hinzugefügt (addText). Ich habe dann eine Methode für diese Funktion erstellt und ihr gesagt, dass sie meine Eingabedaten in der Konsole protokollieren soll, aber wenn ich auf die Schaltfläche „Speichern“ drücke und zur Konsole gehe, wird nichts protokolliert.

In Materialise funktionierte diese Methode früher, daher frage ich mich, ob der Fehler im Bootstrap-Formular auftritt.

Jede Hilfe wird sehr geschätzt.

<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"属性。