CODEWITHSUNDEEP
javascripthtmlvue.jsrendering
Kevbo
Kevbo

Reputation: 293

Vue how to set "selected" for option based off object data

I searched a bit through SO and couldn't find exactly what I'm looking for.

So I have a type of sorting function going on. I have an array of date ranges (PayPeriods) and I can get it to render into a select with option component rendered with a v-for. Like this:

<time-clock-group-component
v-for="(timeClockGroup, index) in timeClockGroups"
:key="`timeClockGroup-${index}`"
:timeClocks="timeClockGroups[index]"
/>

The component is basic:

<template>
  <option>{{ Start }} - {{ End }}</option>
</template>

What I need to do is to have the last component rendered to have the "selected" option so that it will load most recent data without requiring the user having to select it. I have a key:value set up on the PayPeriod object as a bool that I was hoping to use for this scenario, but I can't figure out how to set it up. I've tried to have a mounted check like this:

if (this.payPeriod.Current) {
      document.getElementById(
        "ppc"
      ).innerHTML = `<option selected>{{ Start }} - {{ End }}</option>`;
    }

but it says "Cannot set property 'innerHTML' of null" which I'm assuming is due to something in Vue?

Upvotes: 0

Views: 198

Answers (1)

Christian Werner
Christian Werner

Reputation: 146

It's usually not a good idea to mix document with Vue.

But, for what I understood of what you are trying to do, you want the last element to be automatically selected.

You can create a prop inside your TimeClockGroupComponent, say, selected with a boolean value. We can then calculate for the last element of that array to pass down the selected prop set as true.

Some changes could be:

<!-- parent.vue -->
<time-clock-group-component
  v-for="(timeClockGroup, index) in timeClockGroups"
  :key="`timeClockGroup-${index}`"
  :timeClocks="timeClockGroups[index]",
  :selected="timeClockGroups.length === i + 1"
/>

And:

// TimeClockGroupComponent.vue
<template>
  <option :selected="selected">{{ Start }} - {{ End }}</option>
</template>
// ...
  props: {
    // ...
    selected: {
      type: Boolean,
      default: () => false
    }
  }

Upvotes: 1

Related Questions