Vue warn label missing but label is supplied?

[KazWar]

I've had a go at using Quasar using Blitzar, and even though there is no Quasar example, the existing documentation gave me enough clues to work it out. Now there's an error being displayed which is clear, but to me it seems that it shouldn't be there. So maybe there's some underlying logic or library trick I'm missing.

I use a blitz-form in my step, with the following makeup:

<script setup lang="ts">
import { BlitzForm } from "blitzar"
import testComponent from './test-component.vue'
import { markRaw } from "vue"

const { name, title } = defineProps<{
        name:any,
        title:any,
        step:any
}>()

    const schema = [
      {
        name:"Voornaam",
        label:"Voornaam",
        outlined:true,
        component: markRaw(testComponent),
      },
      {
        name:"Achternaam",
        label:"Achternaam",
        outlined:true,
        component: markRaw(testComponent),
      },
      {
        name:"Email",
        label:"Email",
        outlined:true,
        component: markRaw(testComponent),
      },
      {
        name:"Geb datum",
        label:"Geb datum",
        outlined:true,
        component: markRaw(testComponent),
      },
      {
        name:"Telefoon Nummer",
        label:"Telefoon Nummer",
        outlined:true,
        component: markRaw(testComponent),
      },
    ]

    const formData = $ref({})
</script>

<template>
  <q-step
    :name="name"
    :title="title"
    :done="step > name"
    :header-nav="step > name"
  >
    For each ad campaign that you create, you can control how much you're willing to
    spend on clicks and conversions, which networks and geographical locations you want
    your ads to show on, and more.

        <blitz-form v-model="formData" :schema="schema" columns="2"/>
  </q-step>
</template>

<style scoped lang="scss"></style>

and my test component

<script setup lang=ts>

const { name, label, outlined } = defineProps<{
        name:string,
        label:string,
        outlined:boolean
}>()

</script>

<template>
    <q-input
        :name="name"
        model-value=""
        :label="label"
        :outlined="outlined"
    />
</template>

<style lang="scss" scoped></style>

and the output which does seem to correctly show the supplied label.

[mesqueeb]

@KazWar currently the labels are rendered by BlitzField and not passed to your testComponent.

If you want to pass the labels to testComponent and not render them as BlitzField labels, you need to add this:

<BlitzForm :internalLabels="true" />

let me know if this solves it!

PS: En veel success ;)

_{--
Blitzar was made with 💜 by Luca Ban.
You cannot sponsor every project, but next time you do, think of this one for its prolonged maintenance.}

[KazWar]

Hey, thanks for the quick notice. I also stumbled it upon when inspecting the BlitzForm Properties, unfortunately it doesn't seem to actually work. 😢

<blitz-form v-model="formData" :schema="schema" :internal-labels="true"/>

[mesqueeb]

Then it's a bug 😥 i will look into it. PR welcome as well!

[mesqueeb]

@KazWar I have set up a Quasar example, but cannot reproduce this bug. It works for me.

Please clone the repo and do these steps:

1. npm i
2. npm run dev:quasar
3. open browser at localhost:8080
4. check the source code at example-projects/quasar

Let me know if you have any further findings.

[KazWar]

Oh, I didn't notice your message. I already located & supplied a fix in a pull request. Give it a whirl😄

[mesqueeb]

@KazWar can you try latest version and let me know if it fixed your issue?

_{--
Blitzar was made with 💜 by Luca Ban.
You cannot sponsor every project, but next time you do, think of this one}

[KazWar]

Yeah, it fixed the issue. 👍