Cannot read properties of null (reading 'locale')

[gpproton]

Hi @abichinger, i'm currently trying to create a quasar extension with the renderless component from @vue-js-cron/core, but i keep getting the above error although i'm still trying to look for a work around any advice on resolving this will be appreciated.

[abichinger]

Hello @gpproton, please provide a simple code example so I can reproduce the error.

[gpproton]

Hi @abichinger

Here are the sample below: Plugin: https://github.com/gpproton/quasar-cron/blob/main/ui/dev/src/boot/register.js Basic component usage: https://github.com/gpproton/quasar-cron/blob/main/ui/src/Component.vue

I forgot to mention installation is done by pnpm install

[abichinger]

Unfortunately, vue-js-cron is currently targeted at Vue v2. Therefore this component cannot be used with the latest version of quasar. I will create an issue for migrating to Vue v3, but I can't say how long it will take me to do this.

The error is caused by the following line: https://github.com/abichinger/vue-js-cron/blob/ff606807089a0ad7e13b863953897092b16cbb86/core/src/core.vue#L25

Related breaking change: https://v3-migration.vuejs.org/breaking-changes/props-default-this.html

[gpproton]

Thanks so much, i would have liked to help with this but i don't have much experience in creating vue plugins that are compatible with 2 and 3. But ill try my hand at it, if there's success i'll send a pull request. my email is me@godwin.dev i'll like to know when this is done so i can finish the quasar extension.

[abichinger]

@gpproton, I just released @vue-js-cron/core@next with vue3 support.

Install: yarn add @vue-js-cron/core@next The new documentation can be found at https://abichinger.github.io/vue-js-cron/next/

I'm excited for your quasar extension. :) If you would like me to link it, create a new issue as soon as it's done.

[kkurt]

Hello abichinger; First, thank you for this awesome clean library. I am trying to use vue-js-cron/core (renderless) in quasar but i am getting always cron value like " * [object Object] [object Object]". If you would have time to take a look, it would be really appriciated.

<cron-core
                  v-model="props.row.integration.cron"
                  v-slot="{ fields, period, error }"
                >
                  <div>
                    <!-- period selection -->
                    {{ period.prefix }}
                    <q-badge color="orange">
                      {{ period.attrs.modelValue }}
                      <q-menu activator="parent">
                        <q-list>
                          <q-item
                            v-ripple
                            v-close-popup
                            clickable
                            v-for="item in period.items"
                            :key="item.id"
                            @click="
                              period.events['update:model-value'](item.id)
                            "
                          >
                            {{ item.text }}
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-badge>
                    {{ period.suffix }}

                    <!-- cron expression fields -->
                    <template v-for="f in fields" :key="f.id">
                      {{ f.prefix }}
                      <q-badge color="red">
                        <q-select
                          filled
                          dense
                          v-model="f.attrs.modelValue"
                          multiple
                          :options="f.items"
                          :option-value="(opt) => opt.value"
                          :option-label=" (opt) => opt.text "
                          @update:model-value="f.events['update:model-value']"
                          style="width: 200px"
                        >

                        </q-select>
                      </q-badge>
                      {{ f.suffix }}
                    </template>

                    <!-- editable cron expression -->
                    <q-input
                      class="mt-4"
                      :modelValue="props.row.integration.cron"
                      label="cron expression"
                      :error-messages="error"                    
                    />
                  </div>
                </cron-core>

[abichinger]

@kkurt I'm glad you tried my library :)

It looks like q-select emits the whole option. f.events['update:model-value'] needs the value of an option. This can be accomplished by using emit-value and map-options

[kkurt]

It worked. Thank you for fast response @abichinger :).