VueJS Custom Props Validation Function

Question

Я новичок в VueJS, поэтому я слежу за их official guide.

Я могу запустить первый 5 валидатор свойств, но, похоже, я не могу запустить последний пример (специальная функция проверки).

мой файл JS:

Vue.component('propValidation', { 
    props: { 
     // basic type check (`null` means accept any type) 
     propA: Number, 
     // multiple possible types 
     propB: String, 
     // a required string 
     propC: { 
      type: String, 
      required: true 
     }, 
     // a number with default value 
     propD: { 
      type: Number, 
      default: 100 
     }, 
     // object/array defaults should be returned from a 
     // factory function 
     propE: { 
      type: Object, 
      default: function() { 
       return { message: 'hello' } 
      } 
     }, 
     // custom validator function 
     propF: { 
      type: Number, 
      validator: function (value) { 
       console.log("inside validator: " + value); 
       return value > 10; 
      } 
     } 
    }, 
    template:"<div>" + 
    "<p>PropA (Number): {{propA}}</p>" + 
    "<p>PropB ([String, Number]): {{propB}}</p>" + 
    "<p>PropC (Require String): {{propC}}</p>" + 
    "<p>PropD (Default Number): {{propD}}</p>" + 
    "<p>PropE (Default Object/Array): {{propE}}</p>" + 
    "<p>PropF (Custom Validator): {{propF.validator()}}</p>" + 
    "</div>" 
}); 

new Vue({ 
    el:"#example" 
}); 

и HTML-файл:

<div id="example"> 
    <prop-validation :prop-a="200" prop-b="string" prop-c="Require String" :prop-e="{not:'wee'}" :prop-f="5"></prop-validation> 
</div> 

и, наконец, результат:

PropA (Number): 200 
PropB ([String, Number]): string 
PropC (Require String): Require String 
PropD (Default Number): 100 
PropE (Default Object/Array): { "not": "wee" } 
PropF (Custom Validator): 

с предупреждением:

[Vue warn]: Invalid prop: custom validator check failed for prop "propF". (found in component <propValidation>)

Заранее спасибо

редактировать: Теперь, когда я думаю об этом, это, предполагают, чтобы вернуть «истина», как выход, или это просто дать предупреждение, что это не правильно? Возможно, я смотрел на это по-другому и ожидал, что возвращаемое значение будет либо истинным, либо ложным.

Answer 1

Согласно документации:

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

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

При определении валидатор, как это, вы говорите, что все входные данные для этого конкретного валидатор должен быть больше 10.

  validator: function (value) { 
      console.log("inside validator: " + value); 
      return value > 10; 

Затем, когда вы связываете номер 5 в качестве значения для данного конкретного объекта недвижимости, валидатор возвращает false и испускает предупреждение.

Answer 2

Вы можете оформить vue-properties:

import {biggerThan} from 'vue-properties'; 

export default { 
    props: { 
     canDrink: { 
      type: Integer, 
      validator: biggerThan(18) 
     }, 
    } 
}