How to trigger a click on dynamic element in Vue.js?

Question

I have dynamically generated tabs with a range of time(from 8am - 9am). I'm trying to trigger a click when the current time is in between the range. I added the ref but getting it unidentified .

<li v-for="(chore, index) in chores" :key="chore.id">
<a :ref="chore.time_from +'-'+ chore.time_to">Link</a>
</li>

and the script

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();
        }
      });
    });
  },

Answer 1

what I ended up doing is to push the response to the finally() function

ref="chores"

and

.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()) {
            i.push(key);
          }
        });
      })
      .finally(() => this.$refs.chores[i].click());