I've done some digging on SO but haven't found exactly what I need.
So, here's the situation - I've got a sorting function in progress. I have an array of date ranges (PayPeriods) that I want to render into a select with option components using v-for. Here's an example:
<time-clock-group-component
v-for="(timeClockGroup, index) in timeClockGroups"
:key="`timeClockGroup-${index}`"
:timeClocks="timeClockGroups[index]"
/>
The component is pretty straightforward:
<template>
<option>{{ Start }} - {{ End }}</option>
</template>
My goal is to automatically select the last rendered component so it loads the most recent data without needing user input. I have a bool key:value setup on the PayPeriod object that I thought could work for this, but I'm struggling to implement it. I tried using a mounted check like this:
if (this.payPeriod.Current) {
document.getElementById(
"ppc"
).innerHTML = `<option selected>{{ Start }} - {{ End }}</option>`;
}
However, I'm getting the error message "Cannot set property 'innerHTML' of null," which I suspect might be related to something in Vue?