如何提交“ vue-multiselect ”选定选项 - Vue.js答案

【问题标题】：How to submit " vue-multiselect " selected option - Vue.js如何提交“ vue-multiselect ”选定选项 - Vue.js
【发布时间】：2019-03-26 09:11:09
【问题描述】：

我的表单有两个输入，Options（多选）和Amount

我已设法将 Amount 添加到 new Form，但未能添加所选选项。

HTML

 <template>
    <div class="container">
        <form @submit.prevent="submitForm" @keydown="form.onKeydown($event)">
            <h5 class="form-header">
                Vue JS form - Laravel
            </h5>
            <div class="form-group row">
                <label class="col-form-label col-sm-4" for=""> Options</label>
                <div class="col-sm-8">
                    <multiselect
                        v-model="selected"
                        :options="options">
                    </multiselect>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-sm-4" for=""> amount</label>
                <div class="col-sm-8">
                <input v-model="form.amount" type="text" name="amount" class="form-control" >
                </div>
            </div>
            <div class="form-buttons-w text-right">
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>
  </template>

<script>
    export default {
      data(){
        return {
          selected: null,
          options: ['One', 'Two', 'Three'],
          form: new Form({
            amount : ''
          })
        }
      },
      methods : {
        submitForm(){
          this.form.post('api/transaction')
        }
      },
      mounted() {

      }
    }
</script>

如何在提交的数据中获得选定的选项（multiselect）？输入金额的方式相同。

【问题讨论】：

你为什么不试试 v-model="form.selected" ？
添加多选属性以形成并使用 v-model 作为@TohidDadashnezhad 提到的
感谢 Tohid & Emīls 的帮助 .. 我刚刚添加了 v-model="form.selected" 并将属性添加到表单中 .. 你们中的任何人都可以将其写为答案 .. 因为我无法将评论设置为答案，我不想功劳。

标签： javascript laravel vue.js vuejs2 vue-multiselect

【解决方案1】：

你可以这样做

 <div class="form-group row">
     <label class="col-form-label col-sm-4" for=""> Options</label>
         <div class="col-sm-8">
              <multiselect
               v-model="form.selected"
               :options="options">
              </multiselect>
         </div>
 </div>
<script>
export default {
  data(){
    return {
      selected: null,
      options: ['One', 'Two', 'Three'],
      form: new Form({
        amount : '',
        selected:[],
      })
    }
  },
  methods : {
    submitForm(){
      this.form.post('api/transaction')
    }
  },
  mounted() {

  }
}    </script>

【讨论】：