[Vue 警告]：无效的道具：bootstrapvue 中道具“colspan”的自定义验证器检查失败答案

【问题标题】：[Vue warn]: Invalid prop: custom validator check failed for prop "colspan" in bootstrapvue[Vue 警告]：无效的道具：bootstrapvue 中道具“colspan”的自定义验证器检查失败
【发布时间】：2020-01-25 15:05:58
【问题描述】：

我在我的Vuejs 项目中使用BootstrapVue，我在b-table-simple componentinb-thead table helper 中遇到了一个奇怪的问题"Invalid prop" 我将colspan 与数组长度绑定在一起，它总是给出一个数字，它工作正常，但它会生成控制台警告消息：

[Vue warn]: Invalid prop: custom validator check failed for prop "colspan".

found in

---> <BTh>
       <BTr>
         <BThead>
           <BTableSimple>
             <NationalTrends> at resources/js/components/trends/NationalTrends.vue
               <Trends> at resources/js/components/trends/Trends.vue
                 <Root>

当我输入数字（4 或任何其他数字）时，它可以正常工作而不会在控制台中生成警告。

下面是我的代码：

<template>
<div>
<b-table-simple hover small caption-top responsive striped>
                    <caption>Commodity Trends</caption>
                    <b-thead head-variant="light">
                        <b-tr>
                            <b-th>Commodity</b-th>
                            <b-th>Current Month</b-th>
                            <b-th :colspan="selected_periods.length">Previous Period</b-th>
                            <b-th :colspan="selected_periods.length">% Change From the Previous Period</b-th>
                            <b-th :colspan="selected_periods.length" class="text-center">Direction of Change</b-th>
                        </b-tr>
</div>
</template>

请帮忙，我花了一个小时试图找出问题所在，但没有运气......

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

尝试这样使用：

:colspan="selected_periods.length > 0 ? selected_periods.length : 1"

【讨论】：

【解决方案2】：

请对照该自定义验证器检查 selected_periods.length（请参阅 bootstrap-vue source）

const digitsRx = /^\d+$/

// Parse a rowspan or colspan into a digit (or null if < 1 or NaN)
const parseSpan = val => {
  val = parseInt(val, 10)
  return digitsRx.test(String(val)) && val > 0 ? val : null
}

/* istanbul ignore next */
const spanValidator = val => isUndefinedOrNull(val) || parseSpan(val) > 0

export const isUndefined = val => val === undefined

export const isNull = val => val === null

export const isUndefinedOrNull = val => isUndefined(val) || isNull(val)

【讨论】：

我怀疑 selected_periods.length 有时可能返回 undefined 或意外的东西。
正如我所说的selected_periods.length 总是返回数字
selected_periods 的初始值是多少？ [] ?

【解决方案3】：

我设法通过添加默认值 if null（这不会在我的代码中发生）来删除警告，如下所示：

<b-th :colspan="selected_periods.length || 4">Previous Period</b-th>
<b-th :colspan="selected_periods.length || 4">% Change From the Previous Period</b-th>
<b-th :colspan="selected_periods.length || 4" class="text-center">Direction of Change</b-th>

【讨论】：

再次：您应该使用空数组而不是 null 值初始化 selected_periods，这样 selected_periods.length 始终在您的模板中按预期工作。