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

Question

I have this form with two inputs, Options (multiselect) and Amount

I have managed to add Amount to new Form but I failed to add the selected option.

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>

How can I get the selected option ( multiselect ) in submitted data ? The same way am getting entered amount.

Answer 1

You can do like this

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