Form category does not reflect any changes from dropdown?

I'm using vue 3 and select 2 .

my code

<div>
                    <label for="category">Category</label>
                    <select v-model="form.category" class="category-dropdown w-full py-6" name="state">
                        <option value="" hidden>Select Category</option>
                        <option :value="category.id" v-for="category in categories" :key="category.id">{{ category.title
                            }}</option>
                    </select>
                    <p v-if="errors?.category" class="text-red-500 text-sm">
                        {{ errors?.category }}
                    </p>
                </div>

my testing code and form data with inertia form helper

const form = useForm({
    id: null,
    subject: '',
    description: '',
    category: ''
});

//select 2 binding an event
// Bind an event
$('.category-dropdown').on('select2:select', function (e) {
    console.log('select event');
});

Braunson

1 year ago

Level 18

The issue I believe here is Select2 creates it's own DOM elements and doesn't trigger Vu'e reactivity system when values change. When Select2 updates, Vue doesn't know about it, so v-model doesn't sync.

Why not use a Vue-compatible alternative like vue-select like so:

<v-select 
    v-model="form.category" 
    :options="categories" 
    label="title" 
    :reduce="category => category.id"
    placeholder="Select Category"
/>

If you need to use Select2, here's a way to do the manual sync:

nextTick(() => {
    $('.category-dropdown').select2().on('select2:select', function (e) {
        // Manually update the form value
        form.category = e.target.value;
    });
});

// Watch for programmatic changes to update Select2
watch(() => form.category, (newVal) => {
    $('.category-dropdown').val(newVal).trigger('change.select2');
});

Please or to participate in this conversation.