在 bootstrap-vue datepicker 中检测 v-for 中每个元素的目标

Posted 2023-02-23

【中文标题】在 bootstrap-vue datepicker 中检测 v-for 中每个元素的目标

【英文标题】：Detect the target of each element in v-for in bootstrap-vue datepicker

【发布时间】：2020-08-15 20:48:22

【问题描述】：

我试图获取由v-for 呈现的每个datepicker 的target。

我需要在每个datepicker 上禁用不同的日期，记住v-for 循环正在迭代elements 变量，这是一个在每次执行中可能不同的数字。 我正在使用 prop date-disabled-fn 停用日期，但我需要在每次迭代中，此函数还停用前一个 datepicker 中加载的日期之前的所有日期。

我知道如何停用日期，但我需要知道在执行停用功能时我在datepicker 中，以便添加停用日期的条件。 这是v-for 循环。

<div v-for="elem in elements" :key="elem">
    <label :for="'datepicker' + elem" v-text="'My element ' + elem"></label>
    <b-form-datepicker
        :id="'datepicker' + elem"
        v-model="inputs.dates[elem]"
        class="mb-2"
        v-bind="labels[locale] || "
        :date-disabled-fn="dateDisabled"
        :locale="locale"
        :start-weekday="weekday"
    ></b-form-datepicker>
</div>

这是methods中的停用功能

dateDisabled(ymd, date) 
    const weekday = date.getDay();
    const day = date.getDate();
    if(weekday === 0 || weekday === 6) 
         return true
    
    // I want to detect the target here.

prop :date-disabled-fn 使用两个参数表明我不知道如何添加第三个参数，或者是否有某种方法可以以另一种方式检测 target。

Bootstrap-vue datepicker documentation

【参考方案1】：

如果你只需要发送第三个参数，那你不能这样做

:date-disabled-fn="(ymd, date) => dateDisabled(ymd, date, elem)"

【讨论】：

dateDisabled 函数中的第二个参数是日期，但效果很好。谢谢。