Quasar file picker label slots for adding custom label in q-file

Question

what is the correct way of showing the custom label slots in Quasar?

my intention is to add icons/image by using label slot

here is the data()

  data() {
    return {
      showLabel: true,
      labelText: "My custom Label",
      registrationNumber: null,
    };
  },

and here is my template:

<q-file
  outlined
  class="registration-field"
  :label-slot="showLabel"
  label-color="red"
  v-model="registrationNumber"
>
  // here we add our custom label slot
  <template v-slot:label>
    <div>{{ labelText }}</div>
  </template>
</q-file>

but it seems that this custom label is not showing at all.

Answer 1

For Custom Label you don't need to add a slot for that you can directly change the label.

    <q-file
  outlined
  class="registration-field"
  label-color="red"
  v-model="registrationNumber"
  :label="labelText"
>
      <template v-slot:label>
    <div><q-icon name="photo"></q-icon> Custom Label</div>
  </template>
      
</q-file>

codepen - https://codepen.io/Pratik__007/pen/LYZRazr