There is a select box that displays either one of the two select boxes based on its value change:
<form id="reportForm">
<select class="form-control chosen-enabled"
v-model="selectedDataType">
<option value="First">Show First</option>
<option value="Second">Show Second</option>
</select>
<select class="form-control chosen-enabled"
v-if="selectedDataType === 'First'">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select class="form-control chosen-enabled"
v-if="selectedDataType === 'Second'">
<option value="foo">Foo</option>
<option value="baz">Baz</option>
<option value="bar">Bar</option>
</select>
</form>
The implementation in Vue js is fairly straightforward:
var app = new Vue({
el: '#reportForm',
data() {
return {
selectedDataType: '',
}
}
});
Everything is functioning correctly.
However, along with this, the Chosen JQuery library is also being used, which requires calling $('.some-selector').chosen().
Since these DOM elements are dynamically added by Vue, they are new and must have the $(...).chosen() method invoked on them to enable the Chosen functionality.
How can I manipulate DOM elements without disrupting Chosen?