[Vuejs]-Getting dynamically rendered Vue.js dropdown to work with Select2 library

by

0👍

✅

watch for changes to filteredWidgets, and call .select2().

watch: {
    async filteredWidgets() {
        await this.$nextTick() // wait for DOM to update
        $(this.$refs.widgetSelect).select2()
    }
}

You’ll need to add a ref to the <select> so you can access the element directly with this.$refs.widgetSelect, instead of doing something like this.$el.querySelector('#widgetSelect'). The id attr is no longer needed, unless you’re using it for something else.

<select ref="widgetSelect" name="widgets">

Leave a comment