I am facing an issue with my Vue app where the change event seems to trigger even before I make a selection. I tried using @input instead of @change, but encountered the same problem as described below.
I have tested both @change and @input events, but they still fire when the controls load initially.
Interestingly, this was working fine until I made some CSS changes to isolate the component from its surrounding styles. However, I'm puzzled as to why this would affect the behavior.
Any insights on why adding the options tag and contents would cause the change event to fire?
<div class="form-group" :class="{formError: errors.has('formSection')}">
<label for="formSection">Section*</label>
{{ formModel }}
<select
v-model="formModel.idSection1"
class="form-control"
id="formSection"
name="formSection"
@input="onChangeSectionLevel1">
<option v-for="sectionLevel1 in formModel.sectionLevel1"
v-bind:value="sectionLevel1.value"
v-bind:key="sectionLevel1.id">
{{ sectionLevel1.value }}
</option>
</select>
<span v-if="errors.has('formSection')">This field is required</span>
</div>
Whenever I include the options tag that loops through the items, the onChangeSectionLevel1 function is triggered. I suspected it could be related to vee-validate, but removing it did not resolve the issue.
methods: {
onChangeSectionLevel1() {
alert("changed");
...
}
}
Update:
I noticed that when I print out the bound object, it does not contain the idSection1 item.
{
"idSection2": null,
"idSection3": null,
}
However, if I add a dummy option like below, all 3 data items including idSection1 are visible, which were missing when looping through with v-for.
<select
v-model="formModel.idSection1"
class="form-control"
id="formSection"
name="formSection"
@change="onChangeSectionLevel1">
<option>Hello World</option>
</select>
The data item now includes idSection1 as well:
{
"idSection1": null,
"idSection2": null,
"idSection3": null
}
Thank you in advance for your help!