如何提交“vue-multiselect”选择的选项 - Vue.js

Question

我的这个表格有两个输入，选项（多选）和金额

我已设法将 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>

JS

<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）？我输入金额的方式相同。

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

如何提交“vue-multiselect”选择的选项 - Vue.js

How to submit " vue-multiselect " selected option - Vue.js

javascript

laravel

vue.js

vuejs2

vue-multiselect