Impossible de soumettre des données à la console du projet Vue

Question

J'essaie de tester un formulaire dans Vue en utilisant les formulaires de la bibliothèque Bootstrap-Vue. J'ai créé un événement pour le formulaire (submit) et ajouté une fonction pour cet événement (addText). J'ai ensuite créé une méthode pour cette fonction et lui ai dit d'enregistrer mes données d'entrée sur la console, mais lorsque j'appuie sur le bouton "Enregistrer" et que je vais sur la console, rien n'est enregistré.

Dans Materialise, cette méthode fonctionnait, je me demande donc si l'erreur apparaît dans le formulaire Bootstrap.

Toute aide est grandement appréciée.

<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Événement :

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

N'oubliez pas d'ajouter des b-button组件中添加type="submit"attributs.