我正在尝试使用Bootstrap-Vue库中的表单来测试Vue中的一个表单。 我为表单创建了一个事件(submit),并为此事件添加了一个函数(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>
b-form-group
不是一个表单,而是用于结构化标签和输入框的布局,为了提交这些输入框的内容,你需要将b-form-group
标签包裹在一个b-form
组件中,并添加@submit
事件:不要忘记在
b-button
组件中添加type="submit"
属性。