How to make QSelect show the first option as the default value?

[BenJackGill]

I have a QSelect element.

It takes an array of objects for the options.

Now I want the first one of those options to be selected as the default model value (the value that is first shown upon page load).

How do I make that happen?

At the moment my code will display the drop down menu correctly with all the options but it does not select the first one as a default.

Here the code:

<template>
  <div class="col-12 col-sm-6 q-mb-md">
    <q-card flat bordered>
      <q-select
        v-model="model"
        v-bind="$attrs"
        :options="options"
        borderless
        label="Audit Date"
        class="q-px-md"
        :dropdown-icon="ionChevronDownOutline"
      >
        <template #no-option>
          <q-item>
            <q-item-section class="text-grey"> No results </q-item-section>
          </q-item>
        </template>
      </q-select>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import { ionChevronDownOutline } from '@quasar/extras/ionicons-v6';
import { ref, PropType } from 'vue';

const props = defineProps({
  options: {
    required: true,
    type: Array as PropType<{ label: string; value: string }[]>,
  },
});

const model = ref(props.options[0]);
</script>

UPDATE:

I have realized this problem is because the data for options is async.

I thought it would be reactive and update after the options value has changed. But I think what is happening is the array is first empty, so it displays an empty value, and then later it updates with the options, but the selected value never updates at that point.

For example this is what the parent looks like:

<audit-select-card
    :options="auditSelectOptions"
    @update:model-value="handleSelectedAudit"
/>

And if I load the auditSelectOptions like this it works because it is pre-loaded with values:

const auditSelectOptions = computed(() => {
  return [
    {
      value: '111',
      label: 'aaa',
    },
    {
      value: '222',
      label: 'bbb',
    },
    {
      value: '333',
      label: 'ccc',
    },
  ];
});

But if I load the options like this, which is my actual code, it does not work. In this case audits is loaded async from my Firebase database:

const auditSelectOptions = computed(() => {
  const optionsArray = [];
  if (audits.value) {
    for (const audit of audits.value) {
      if (audit.createdAt && audit.id) {
        const formattedDate = formatDate(
          new Date(audit.createdAt.seconds * 1000),
          'MMMM Do YYYY, h:mm A'
        );
        optionsArray.push({
          value: audit.id,
          label: formattedDate,
        });
      }
    }
  }
  console.log(optionsArray);
  return optionsArray;
});

[metalsadman]

that should work, try moving v-bind before v-model.

[BenJackGill]

I narrowed down the problem to async data loaded into the options prop.

And I have updated the question to reflect that.

Do you have any idea how to solve that problem?

[BenJackGill]

Figured it out.

I needed to watch the props so that when the props were loaded async it would then update the model.

Here is the full code:

<template>
  <div class="col-12 col-sm-6 q-mb-md">
    <q-card flat bordered>
      <q-select
        v-bind="$attrs"
        v-model="model"
        :options="options"
        borderless
        label="Audit Date"
        class="q-px-md"
        :dropdown-icon="ionChevronDownOutline"
      >
        <template #no-option>
          <q-item>
            <q-item-section class="text-grey"> No results </q-item-section>
          </q-item>
        </template>
      </q-select>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import { ionChevronDownOutline } from '@quasar/extras/ionicons-v6';
import { ref, PropType, watch } from 'vue';

const props = defineProps({
  options: {
    required: true,
    type: Array as PropType<{ label: string; value: string }[]>,
  },
});

const model = ref(props.options[0]);

watch(props, () => {
  model.value = props.options[0];
});
</script>