1

I'm using Vue, v-calendar library and moment library.

I want that when a page is rendered, a input tag should get a value from getAPI(), but it doesn't.
I guess it's because start and end in the range data is ''.
so I tried to assign data into the input value directly and it worked.
but I want to know why I should assign data in to input value directly.

Is there a way that doesn't use ref and using v-calendar properties?

Thanks in advance!

This is my template code below,

<form class="form" @submit.prevent> <Vc-date-picker v-model="range" :masks="masks" is-range :min-date="today" > <template v-slot="{ inputValue, inputEvents, isDragging }"> <div class="rangeInput"> <div class="eachInputWrapper"> <input id="eachInput" ref="startInput" :class="isDragging ? 'text-gray-600' : 'text-gray-900'" :value="inputValue.start" v-on="inputEvents.start" /> </div> </div> </template> </Vc-date-picker> </form> 

This is my script code

data(){ return{ range: { start: '', end: '', }, } }, methods:{ dateFormat(data){ return moment(data).format("YYYY-MM-DD"); }, getAPI(){ this.$thisIsAPI(Id,Data).then((data)=>{ this.range.start = this.dateFormat(data.fromDate); this.range.end = this.dateFormat(data.expireDate); }); }, }, created(){ this.getAPI(); } 

This is what I tried, and the input tag gets the value when the page is renderd.

getAPI(){ this.$thisIsAPI(Id,Data).then((data)=>{ this.range.start = this.dateFormat(data.fromDate); this.range.end = this.dateFormat(data.expireDate); }); this.$refs.startInput.value = this.dateFormat(this.botInfo.fromDt); this.$refs.endInput.value = this.dateFormat(this.botInfo.expireDt); }, 
Share

    0

    Browse other questions tagged or ask your own question.