VueJS - Object Props Validierung

Question

Wie kann ich in VueJS Objekttypen Requisiten validieren, um sicherzustellen, dass das Objekt bestimmte Felder definiert hat?

Zum Beispiel möchte ich sicherstellen, dass die Benutzerstütze die Felder 'name', 'birthDate' und so weiter haben wird.

Vielen Dank im Voraus.

Answer 1

Sie können eine benutzerdefinierte Validator-Funktion für Objekte erstellen:

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

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

Funktion true zurückkehren sollte, wenn alle Felder vorhanden sind.

Beispiel: 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' 
     } 
    } 
}); 

Wenn Prüfer fehlschlägt Sie eine Vue warn in Browser-Konsole sehen.

Answer 2

Hier ist ein Beispiel für einen Validator, den ich für einen ähnlichen Fall für eine Eigenschaft geschrieben habe, um eine Anzeigeverzögerung für ein Objekt zu übermitteln, das auf dem Bildschirm in Millisekunden angezeigt wird. In diesem Fall kann die Eigenschaft entweder eine Zahl sowohl für "Zeigen" als auch für "Verbergen" sein, oder sie kann ein Objekt sein, das für jeden Fall unterschiedliche Verzögerungen definiert.

Ich überprüfe den Typ jeden Schlüssel, den ich erwarte, um sicherzustellen, dass es übereinstimmt, in meinem Fall "Nummer". Wenn ein Schlüssel fehlt, ist der Typ "undefiniert". In meinem Fall sind negative Werte nicht erlaubt. vielleicht

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; 
     } 
    }, 
}