Trying to create a dynamic select input that updates its options based on an AJAX response. When using hardcoded data, everything works fine. However, when attempting to populate the options dynamically using the AJAX response, reactivity is lost.
For example, with the object {Foo: 'Bar', Lorem: 'Ipsum'}:
<select>
<option value="Foo">Bar</option>
<option value="Lorem">Ipsum</option>
</select>
The issue arises when trying to make the data dynamic using this function:
$.get('/registrar/levels', function (data) {
for (const datum of data) {
addModal.levelFields[datum.name] = datum.id;
}
});
The desired dropdown functionality looks like this:
Vue.component("modal-add-form", {
props: {
formName: String,
formType: [String, Number],
options: Object,
},
template: `<div class="form-group" v-if="formType !== 'select'">
<label :for="formName" v-text="formName"></label>
<input :type="formType" class="form-control" :name="formName" :id="formName" value="" :placeholder="formName">
</div>
<div v-else>
<select :name="formName" class="form-control">
<option v-for="(value, name) in options" :value="value" v-text="name"></option>
</select>
</div>`
});