How to submit " vue-multiselect " selected option - 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.

Add multiselect property to form and use v-model as @TohidDadashnezhad mentioned — Emīls Gulbis
– Emīls Gulbis, Commented Mar 26, 2019 at 10:33
Thanks Tohid & Emīls for the help .. I just added v-model="form.selected" and added the property to the form .. Any of you can write it as answer .. because I can't set comment as answer and I don't want to take the credit. — ikuchris
– ikuchris, Commented Mar 26, 2019 at 10:44

Tohid Dadashnezhad · Accepted Answer · 2019-03-26 11:10:01Z

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>

answered Mar 26, 2019 at 11:10

Tohid Dadashnezhad

1,9481 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related