无法将数据提交到Vue项目的控制台
P粉252423906
P粉252423906 2023-09-09 19:07:44
0
1
490

我正在尝试使用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>

P粉252423906
P粉252423906

全部回复(1)
P粉178894235

b-form-group不是一个表单,而是用于结构化标签和输入框的布局,为了提交这些输入框的内容,你需要将b-form-group标签包裹在一个b-form组件中,并添加@submit事件:

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

不要忘记在b-button组件中添加type="submit"属性。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板