Vue 프로젝트 콘솔에 데이터를 제출할 수 없습니다

Question

Bootstrap-Vue 라이브러리의 양식을 사용하여 Vue에서 양식을 테스트하려고 합니다. 양식(제출)에 대한 이벤트를 생성하고 이 이벤트(addText)에 대한 함수를 추가했습니다. 그런 다음 이 함수에 대한 메서드를 만들고 입력 데이터를 콘솔에 기록하도록 지시했지만 "저장" 버튼을 누르고 콘솔로 이동하면 아무것도 기록되지 않습니다.

Materialize에서는 예전에는 이 방법이 통했는데, Bootstrap 형태에서도 오류가 나타나는지 궁금합니다.

어떤 도움이라도 대단히 감사하겠습니다.

<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-button组件中添加type="submit"