Period picker does not display selected value

[lami4]

Hi, I am using CronLight in my project and encountered an issue after installing it. The period picker does not display the selected value (span contains no value). Year is selected as a period:

Hour is selected as a period: Options are displayed just fine though: Vue version: 2.6.11, CronLight version: 1.0.5. Component code:

<template>
    <div class="getting-started-light">
        <CronLight v-model="value" @error="error=$event"/>
        <div>cron expression: {{value}}</div>
    </div>
</template>

<script>
export default {
    name: "CronExpressionEditor",
    props: {
        init: {
            type: String,
            default: '* * * * *'
        }
    },
    data() {
        return {
            value: this.init,
            error: ''
        }
    }
}
</script>
<style>
</style>

[abichinger]

Hey there!

I was able to reproduce the issue on codepen https://codepen.io/abichinger/pen/eYQOjXm, but on my local machine everything is working.

[abichinger]

When I install vue@2.6.11 the issue also appears on my local machine. vue@2.6.13 works for me. Is upgrading an option for you?

I will investigate further.

[abichinger]

Computed values look fine.

Looks like the fallback content for the default slot of the custom-select component is not rendered.

[lami4]

@abichinger I checked the code. It is hard to say why it is happening. Is selectedStr correctly recomputed every time you change a period? As far as I remember the component just stops recomputing selectedStr at some point. selectedStr depends on other computed properties (with computations that are not trivial) -- maybe this is the reason. I personally never encountered an issue with a default slot refusing to render a value returned by a computed property.

[lami4]

@abichinger Another guess is you use a self closing tag here. Maybe using opening and closing tag with no content inside will fix the issue.

[abichinger]

Is selectedStr correctly recomputed every time you change a period?

Yes

@abichinger Another guess is you use a self closing tag here. Maybe using opening and closing tag with no content inside will fix the issue.

Unfortunately doesn't solve the issue.

Even if I change the default slot to

<slot><span>Default: {{value}}</span></slot>

nothing gets rendered

[Yunchitz]

Hello Guys! Is there any progress? Have same issue on latest vue3 version

[abichinger]

Hey, in Vue 2 this issue was resolved by using a version >= 2.6.13

I haven't encountered this issue in Vue 3 yet. Can you provide a reproducible example?

I just created an example and everything seems to be working.

"dependencies": {
  "vue": "3.3.4",
  "@vue-js-cron/light": "2.3.3"
},

[Yunchitz]

Hello @abichinger we use compat build with: "@vue-js-cron/light": "^2.3.3", "@vue/compat": "^3.3.4", "vue": "^3.3.4", Thansk a lot!

[abichinger]

@Yunchitz Please provide a minimal reproducible example. Otherwise I can't help. Please open a new issue if you need further assistance, because I think your issue is not related to this one.

[Yunchitz]

Yap, we just remove migration flag COMPONENT_V_MODEL, and it works fine now. Thx a lot