I cannot submit any data to the console in my Vue project - forms

Question

I am trying to test a form in Vue, using the forms from the Bootstrap-Vue library.
I have made a an event for the form (submit) and I added a function to this event (addText).
Then I made a method for this function, telling it to log my input data to the console, but when I press the "save" button and go into the console nothing has been logged.
This used to work with Materialize, so I am wondering if the error lies somewhere with the Bootstrap forms.
Any help will be much appreciated.
<template>
<b-container fluid>
<h2>Add or edit content for this section</h2>
<b-form-group #submit="addText">
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button variant="success">Save</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 it's layout that structures the label and inputs, in order to submit that inputs you should wrap the b-form-group tags with a b-form component which has #submit event:
<b-form #submit="addText">
<b-form-group >
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button type="submit" variant="success">Save</b-button>
</b-form-group>
</b-form->
don't forget to add type="submit" to the b-button component.