vue.js中如何手动渲染van-calender日历组件 用了几种手动渲染的方法都没有办法，请高手支招！！

Question

vue.js中如何手动渲染van-calender日历组件

用了几种手动渲染的方法都没有办法，请高手支招！！
我要用第一个日历控件的时间去服务器上可选时间，再渲染第二个控件的可选时间。但是这个日历控件只能第一次点击的时候触发渲染，再次点击的时候就不会渲染了，请问如何才能让它重新渲染？

代码如下

{

navigationBarTitleText: '产品购买',

usingComponents: {

"van-calendar": "/native/vant/calendar/index",

"van-stepper": "/native/vant/stepper/index",

"van-popup": "/native/vant/popup/index",

"van-collapse": "/native/vant/collapse/index",

"van-collapse-item": "/native/vant/collapse-item/index",

'parser': '/native/parser/parser'

}

}

.form-wrap { padding: 10px 0; } .bind-wrap { padding: 40px 16px 20px; } .block-title { padding: 10px 16px; }

<div>

    <button @click="show">打开第一个日历</button>



    <div style="width: 45%;display: flex;justify-content: flex-end;"

         class="flex-average flex-row" @click="showCalendarReverse">

        <div class="flex-center"><span v-if="item.date">{{item.date}}&nbsp;&nbsp;</span>

            <span class="place-holder-color"><span v-if="item.date">更改</span><span v-else>第二个日历</span></span>

        </div>

    </div>

<van-calendar v-if="ableDate" :show="calendarVisible"  :formatter="formatter"

               @close="calendarVisible = false"

              @confirm="onConfirm" :show-confirm="false"/>

    <van-calendar :key="keyToRefresh" v-if="ableDateP"  :show="calendarVisibleReverse"

                  :formatter="formatterP" ref="DateS" :lazy-render="false"

                  @close="calendarVisibleReverse = false"

                  @confirm="onConfirmReverse" :show-confirm="false"/>

</div>

import { formatDate } from '../utils/util'; import { getTwoMonthLater, pareDate } from '../components/calendar/date'; import { productApi } from '../utils/api'; export default { name: 'test', components:{}, data() { return { ableDate: null, ableDateP: null, maxDate: getTwoMonthLater(formatDate()), calendarVisible:true, calendarVisibleReverse:false, keyToRefresh:0, reFresh:true, formData: { // 提交数据 name: '', owner_phone: '', num: 1, date: '', session_id: null, // 场次 card_info: [], datas: [{ date: null, type: null }] }, item:{date:null} } }, mounted() { }, watch:{ ableDateP: { handler: function (val) { if(val) { console.log(this.keyToRefresh) this.$forceUpdate(); } }, immediate: true } }, methods: { show(){ this.showCalendar(); }, transformDate(dates) { let obj = {} dates.forEach(({ year, month, days }) => { // if (month === '06'){} obj[`_${year}_${month}`] = days }) return obj }, getDates() { this.$indicator.open() return productApi.getProductAbleDate({//从服务器获取可用时间 id: 15, type: 'package' }).then((res) => { const { code, data, msg } = res if (code === 1) { this.ableDate = this.transformDate(data.optional) this.calendarVisible = true } }).finally(() => { setTimeout(() => { this.$indicator.close() }, 35) }) }, showCalendar() { this.getDates() }, showCalendarReverse() { this.calendarVisibleReverse = true }, onConfirmReverse(e) { const date = formatDate(e.detail) if (date !== this.formData.date) { this.formData.datas[this.curRow].date = date this.calendarVisibleReverse = false } else { // 相同日期 不做操作 this.calendarVisibleReverse = false } this.formData.datas[this.curRow].date = date; }, formatter(day) { if (!this.ableDate) return day // console.log(day) const date = formatDate(day.date) const dateArr = pareDate(date) // console.log(dateArr) // if (dateArr[1] !== '06') return day let days = this.ableDate[`_${dateArr[0]}_${dateArr[1]}`] // console.log(days) let dayItem if (days) { dayItem = days.find((current) => current.day == dateArr[2]) } // console.log(dayItem) if (dayItem) { // 找到对应项 如果是产品 可用 如果是套餐 则不可用 if (dayItem.price) { day.topInfo = '¥' + dayItem.price } } else { day.type = 'disabled' } if (day.type === 'selected') { this.selectDay = dayItem } return day }, formatterP(day) { console.log('渲染') // if (!this.ableDateP) return day const date = formatDate(day.date) const dateArr = pareDate(date) // if (dateArr[1] !== '06') return day let days = this.ableDateP[`_${dateArr[0]}_${dateArr[1]}`] let dayItem if (days) { dayItem = days.find((current) => current.day == dateArr[2]) } if (dayItem) { // 找到对应项 如果是产品 可用 如果是套餐 则不可用 if (dayItem.price) { day.topInfo = '¥' + dayItem.price } } else { day.type = 'disabled' } if (day.type === 'selected') { this.selectDay = dayItem } return day }, onConfirm(e) { // console.log(e) const date = formatDate(e.detail) this.formData.date = date this.getDateAvilable() this.calendarVisible = false }, getDateAvilable(){ this.getDatesP().then((res) => { const { code, data, msg } = res if (code === 1) { console.log('获取可选时间成功') let curDate = { today: formatDate(Date.now()), optional: data.dates } let temp = [] curDate.optional.days.forEach(item => { let sth = { day: item, price: '' } temp.push(sth) }) curDate.optional = [{ year: data.dates.year, month: data.dates.month, days: temp }] // this.ableDateP = this.transformDate(curDate.optional) let newArr = this.transformDate(curDate.optional) console.log(this.ableDateP) this.ableDateP = {} this.$set(this.ableDateP,[`${Object.keys(newArr)}`],newArr[`${Object.keys(newArr)}`]) this.formatterP(Date.now) console.log('z这时date',this.ableDateP) this.keyToRefresh++ } else { this.$toast(msg) } }) }, getDatesP() { return new Promise((resolve,reject)=> { productApi.getPackageAbleDate({ id: 15, date: this.formData.date, data_type: 2, data_id: 50 }).then((res)=>{ resolve(res) }) }) }, } }

Answer 1

https://www.jb51.net/article/112134.htm