I am working on creating dynamically generated tabs with a specific range of time (from 8am to 9am). My goal is to automatically trigger a click event when the current time falls within this range. However, I am facing an issue where the ref is being identified as unidentified.
<li v-for="(chore, index) in chores" :key="chore.id">
<a :ref="chore.time_from +'-'+ chore.time_to">Link</a>
</li>
Here's the script that I have implemented:
created() {
const me = this;
this.axios.get(`api/chores/${this.$route.name}`).then(response => {
this.chores = _.orderBy(response.data, "time_from", "asc");
$.each(response.data, function(key, value) {
if (value.time_from < me.getNow() && value.time_to > me.getNow()) {
const i = value.time_from + "-" + value.time_to;
const a = me.$refs.i; // **unidentified**
console.log(a);
a.click();
}
});
});
},