Tidak dapat menyerahkan data ke konsol projek Vue

Question

Saya cuba menguji borang dalam Vue menggunakan borang daripada perpustakaan Bootstrap-Vue. Saya mencipta acara untuk borang (serahkan) dan menambah fungsi untuk acara ini (addText). Saya kemudian mencipta kaedah untuk fungsi ini dan memberitahunya untuk log data input saya ke konsol, tetapi apabila saya menekan butang "simpan" dan pergi ke konsol, tiada apa yang dilog.

Dalam Materialize, kaedah ini pernah berfungsi, jadi saya tertanya-tanya jika ralat muncul dalam borang Bootstrap.

Sebarang bantuan amat kami hargai.

<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组件中，并添加@submitAcara:

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

Jangan lupa tambahkan b-button组件中添加type="submit"atribut.