Having just started using Vue, I have a question regarding dynamically rendering a select dropdown and populating its options based on a computed property called filteredWidgets. This computed property depends on user selections made in other dropdowns. Here is the code snippet:
<div v-if="filteredWidgets.length > 0">
<select id="widgetSelect" name="widgets">
<option value="">Select up to two Widgets</option>
<option v-for="widget in filteredWidgets" v-bind:value='widget.id'>
@{{widget.name}}
</option>
</select>
</div>
According to Select2 documentation, this is how you can convert select/option elements into Select2 multiselect elements:
$(document).ready(function() {
$('#widgetSelect').select2();
});
While this approach works for non-dynamically rendered pages, it doesn't suit Vue as the dropdown is rendered dynamically. The dropdown changes based on the selectedWidgets computed property. The challenge is to apply Select2 functionality to the widgetSelect dropdown when it appears or changes. Here is the method for the computed property filteredWidgets():
filteredWidgets() {
var filteredWidgets = this.availableWidgets.filter(widget => {
return widget.color == selectedColor && widget.size == selectedSize;
});
return filteredWidgets;
}
The default select dropdown renders correctly with the desired filtered widgets. However, the task now is to apply select2() to the widgetSelect dropdown immediately after it is rendered by Vue. I'm seeking guidance on the correct way to accomplish this.