Unable to submit data to Vue project's console

Question

I'm trying to test a form in Vue using forms from the Bootstrap-Vue library. I created an event for the form (submit) and added a function for this event (addText). I then created a method for this function and told it to log my input data to the console, but when I press the "save" button and go to the console, nothing is logged.

In Materialize, this method used to work, so I'm wondering if the error appears in the Bootstrap form.

Any help is greatly appreciated.

<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 is not a form, but a layout for structured labels and input boxes. In order to submit the contents of these input boxes, you need to b-form-group The tag is wrapped in a b-form component and adds the @submit event:

<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->

Don’t forget to add the type="submit" attribute in the b-button component.