带有vuex的Formdata帖子

问题描述 投票:0回答:1

我对vuex和vue-js非常陌生。我正在尝试使用vuex发布表单数据。到目前为止,我成功地通过了标题,但是我不知道如何传递多个数据?

要传递的数据:

// Title
<input type="text" name="subject_title">`

// selected data
<datepicker id="set_date" name="set_date"></datepicker> 

// array of options
<multiselect v-model="value" :max-height="0" :options="options" :searchable="false" :multiple="true" group-label="language" track-by="name" label="name" placeholder=""><span class="arrow" slot="caret"></span></multiselect> 

我已经在github上放置了一些代码:https://github.com/samB67/VuexPost

forms vue.js post vuex vue-router
1个回答
0
投票

您可以创建一个对象来将整个表单存储在文件upload.vue中;

data() {
//...
  homeworkForm: {
    title: '',
    date: null,
    somethingElse: ''

  }
}

现在在您的表单中,您只需将v模型放置到homeworkForm对象中的每个对应键上;

<input v-model="homeworkForm.title" type="text" class="form-control" id="formGroupExampleInput" placeholder="Enter text">
<!-- ... -->
<datepicker v-model="homeworkForm.date" id="set_date" name="set_date" />

然后,当您要提交表单时,会将整个homeworkForm对象发送到vuex。

postHandler() {
  this.$store.dispatch('createHomework', this.homeworkForm);
},
© www.soinside.com 2019 - 2024. All rights reserved.