[Vue warn]: недопустимая опора: не удалось выполнить пользовательскую проверку валидатора для опоры «colspan» в bootstrapvue - PullRequest
Новая
       51

[Vue warn]: недопустимая опора: не удалось выполнить пользовательскую проверку валидатора для опоры «colspan» в bootstrapvue

0 голосов
/ 25 января 2020

Я использую BootstrapVue в моем Vuejs проекте, у меня возникла странная проблема "Invalid prop" с b-table-simple componentin b-thead table helper Я связываю 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>

Пожалуйста, помогите, я потратил один час, пытаясь выяснить, в чем проблема, но не повезло ......

Ответы [ 3 ]

1 голос
/ 10 марта 2020

Попробуйте использовать так:

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

0 голосов
/ 26 января 2020

Мне удалось удалить предупреждение, добавив значение по умолчанию, если ноль (что не произойдет в моем коде), как показано ниже: 

<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>
0 голосов
/ 25 января 2020

Пожалуйста, проверьте 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)
...