Ability to add more data to the form dynamically

I was wondering if it’s possible to add more data to the form after it’s been instantiated?

For example (psuedo code):

<template>
    <select v-model="form.approvers" multiple id="approvers" name="approvers"></select>
</template>

<script>
export default {
    data() {
        return {
            form: new Form({
                approvers: [],
            })
        }
    }

    mounted() {
         $('#approvers').select2({
            placeholder: "Enter approvers ",
        });
    },

    methods: {
        save() {
            // Ex.
            this.form.setData(key, value);

            this.form.post();
        }
    }
}
</script>

I have a multi-select form input that is constructed using Select2, but using v-model="form.approvers" on the select doesn’t seem to post the selected values from select2.

Do you know of any ways around this or why it might not be grabbing the values from the select input?

Thanks! 😃

[cretueusebiu]

You can:

this.form.my_key = 'value'

But for your case you should make a custom component then have something like:

<select2 v-model="form.my_key"></select2>

https://vuejs.org/v2/examples/select2.html

Or try this one https://github.com/monterail/vue-multiselect

[arrcorona]

@joneyspark try this as mentioned above. https://github.com/shentao/vue-multiselect