VueJS - オブジェクトの小道具の妥当性確認

Question

VueJSでは、オブジェクトにいくつかの特定のフィールドが定義されていることを確認するために、オブジェクトタイプの小道具を検証するにはどうすればよいですか？

たとえば、私は、ユーザーの小道具にフィールド '名前'、 'birthDate'などがあることを確認したいと思います。

ありがとうございます。

Answer 1

あなたは、オブジェクトのためのカスタム検証機能を作成することができます。すべてのフィールドが存在する場合

https://vuejs.org/v2/guide/components.html#Prop-Validation

props: { 
    propF: { 
     validator: function (value) { 
     return value > 10 
    } 
    } 
} 

機能trueを返す必要があります。

例：https://jsfiddle.net/wostex/63t082p2/27/

<div id="app"> 
<child :myprop="myObj"></child> 
</div> 

Vue.component('child', { 
    template: `<span>{{ myprop.id }} {{ myprop.name }}</span>`, 
    props: { 
     myprop: { 
     validator: function(obj) { 
      return (obj.id && Number.isInteger(obj.id) && obj.name && obj.name.length); 
     } 
     } 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: { 
     myObj: { 
     id: 10, 
     name: 'Joe' 
     } 
    } 
}); 

バリデータが失敗した場合は、ブラウザのコンソールでVue warnが表示されます。

Answer 2

ここでは、画面上に表示され、画面から非表示になるアイテムの表示遅延をミリ秒単位で伝達するためのプロパティの同様のケースについて書いたバリデータです。この場合、プロパティは "show"と "hide"の両方の番号になるか、またはそれぞれの場合に異なる遅延を定義するオブジェクトになります。

私はそれぞれのタイプのキーを調べますが、私の場合は「ナンバー」と一致すると確信しています。キーがない場合、型は '未定義'になります。私の場合、負の値は許されません。このような

props: { 
    delay: { 
     type: [Number, Object], 
     default: 0, 
     validator(value) { 
      if (typeof value === 'number') { 
       return value >= 0; 
      } else if (value !== null && typeof value === 'object') { 
       return typeof value.show === 'number' && 
        typeof value.hide === 'number' && 
        value.show >= 0 && 
        value.hide >= 0; 
      } 

      return false; 
     } 
    }, 
}