Vue 프로젝트 콘솔에 데이터를 제출할 수 없습니다
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>