VueJS Custom Props驗證功能

我是VueJS的新手，所以我一直在關注他們的official guide。VueJS Custom Props驗證功能

我能夠觸發前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>)

在此先感謝

編輯：現在，我想想，難道它想返回「真」作爲輸出還是隻是給予警告，這是不正確的？我可能一直在尋找這種不同的方式，期望返回值是真/假。

來源

2017-01-10 Radizzt

根據該文檔：

這是可能的成分以指定它正在接收的道具的要求。如果不滿足要求，Vue將發出警告。當您創作一個打算供其他人使用的組件時，這特別有用。

他們在這裏說的是，應該始終滿足您指定的驗證器，以便該屬性正常工作。如果沒有，他們會發出警告，就像你正在經歷的那樣。

當你這樣定義的驗證，你說這個特定的驗證所有輸入應大於10

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

然後在綁定的數量爲5值這個特定的屬性，驗證器返回false併發出警告。

來源

2017-04-12 10:52:31 Barm

你可能想籤vue-properties：

import {biggerThan} from 'vue-properties'; 

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

來源

2017-11-27 09:40:09 Danon

VueJS Custom Props驗證功能

回答

相關問題