V-Calendar如何从API获取默认输入值

Question

我正在使用VUE，V-Calendar库和Moment库。

我希望在渲染页面时，输入标签应从getapi（）获得值，但不是。
我想这是因为启动和结束范围数据是“”。
因此，我尝试将数据分配到输入值并起作用。
但是我想知道为什么我应该将数据分配给输入值。

是否有一种不使用REF和使用V-Calendar属性的方法？

预先感谢！

这是下面我的模板代码，

<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>

这是我的脚本代码

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();
}

这是我尝试的，并且输入标签在页面呈现时获取值。

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);
},