我无法在我的 Vue 项目中向控制台提交任何数据

Posted 2023-02-22

【中文标题】我无法在我的 Vue 项目中向控制台提交任何数据

【英文标题】：I cannot submit any data to the console in my Vue project

【发布时间】：2021-03-10 05:19:17

【问题描述】：

我正在尝试使用 Bootstrap-Vue 库中的表单在 Vue 中测试表单。 我为表单（提交）创建了一个事件，并向该事件添加了一个函数（addText）。 然后我为这个函数做了一个方法，告诉它把我的输入数据记录到控制台，但是当我按下“保存”按钮并进入控制台时，没有任何记录。

这曾经与 Materialize 一起使用，所以我想知道错误是否出在 Bootstrap 表单的某个地方。

任何帮助将不胜感激。

 <template>
<b-container fluid>
    <h2>Add or edit content for this section</h2>
      <b-form-group @submit="addText">
          <div class="fieldHeadline">
              <label for="headline">Add headline</label>
              <b-form-input type="text" name="headline" v-model="headline"></b-form-input>
          </div>
          <div class="fieldSecodnaryHeadline">
              <label for="secondaryHeadline">Add secondary headline</label>
              <b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
          </div>
          <div class="fieldText">
              <label for="text">add text</label>
              <b-form-input type="text" name="text" v-model="text"></b-form-input>
          </div>
          <b-button variant="success">Save</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>

【问题讨论】：

我认为@submit事件在b-form-group上不存在，需要在b-form上：bootstrap-vue.org/docs/components/form,bootstrap-vue.org/docs/components/form-group

【参考方案1】：

b-form-group 不是一个表单，它的布局用于构造标签和输入，为了提交输入，您应该使用具有b-form 事件的b-form 组件包装b-form-group 标签：

 <b-form @submit="addText">
  <b-form-group >
      <div class="fieldHeadline">
          <label for="headline">Add headline</label>
          <b-form-input type="text" name="headline" v-model="headline"></b-form-input>
      </div>
      <div class="fieldSecodnaryHeadline">
          <label for="secondaryHeadline">Add secondary headline</label>
          <b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
      </div>
      <div class="fieldText">
          <label for="text">add text</label>
          <b-form-input type="text" name="text" v-model="text"></b-form-input>
      </div>
      <b-button type="submit" variant="success">Save</b-button>
  </b-form-group>
 </b-form->

不要忘记将type="submit" 添加到b-button 组件中。

【讨论】：

不客气，请不要忘记接受我的回答