Spent countless hours searching online for a solution, but to no avail (plus an explanation).
I am encountering an issue with my Vue select component that is connected to a Datatable:
<select @change="statusChanged()" v-model="active" name="FilterStatus" id="FilterStatus" class="form-control selectp" data-placeholder="FilterStatus" tabindex="2">
<option value="all">All</option>
<option :value="true">Active</option>
<option :value="false">Inactive</option>
</select>
Utilizing the "statusChanged" function for onchange events:
data() {
return {
active: 'all'
}
},
methods: {
...
statusChanged(){
if (this.active === true) {
$("#CustomerTable")
.DataTable()
.columns( 1 )
.search( true )
.draw();
} else if (this.active === false) {
....
}
},
The goal is simply to update the status by selecting an option from the dropdown. However, the major CONCERN is that it only works AFTER a hot reload and not immediately upon page refresh! For instance:
step 1: Initial loading of the page step 2: Dropdown is unresponsive and the "active" value remains unchanged step 3: Any code changes made in the editor(arbitrary), saved -> triggers a hot reload and then the select options function properly and the Datatable refreshes with filters applied!
Why does this happen? Any insights or recommendations on how to resolve this issue?