Überprüfen Sie, ob prop Validierung bestanden

Question

Ich habe die folgende Komponente Eigenschaft (es ist im Grunde für eine Bootstrap-Alert-Komponente):

props: { 
    alertType: { 
     validator: function (value) { 
      return [ "success", "info", "warning", "danger" ].indexOf(value) >= 0; 
     }, 
     default: "danger" 
    }, 
// Some more things 
computed: { 
    classes: { //Compute the correct classes for the alert type 
     var classesObj ={ 
      'alert-dismissible': this.dismissable 
     }; 
     classesObj["alert-"+this.alertType]=true; //Problem if invalid 
     return classesObj; 
    } 
} 

Das funktioniert gut in dem Sinne, dass, wenn ich es nicht einen Alarmtyp liefern verwendet " Gefahr ", aber wenn ich einen Alerttyp bereitstelle und die Validierung nicht besteht, wird der alertType auf diesen Wert gesetzt und es wird eine Konsolenwarnung ausgegeben (was meines Wissens das beabsichtigte Verhalten ist).

Meine Frage ist, ob es innerhalb der classes berechnete Eigenschaft möglich ist, um zu bestimmen, ob die alertType prop weitergegeben oder Validierung fehlgeschlagen ist (und im Idealfall, wenn es bekommen fehlgeschlagen ist und der Standardwert verwendet, bezogen auf die Komponente prop Definition.

Answer 1

Aus Was ich sagen kann, nein, man kann nicht auf die Requisitenspezifikation innerhalb der Komponente verweisen, aber man kann ziemlich nahe kommen, indem man die Requisitenspezifikation außerhalb der Komponentendefinition definiert, damit man sie beim Einrichten der Requisite und der Requisite verwenden kann die berechnete

(Aus welchem ​​Grund auch immer, Prop Validierung scheint nicht tatsächlich in das Snippet laufen. Keine Warnung ist generat ed.)

const alertTypeSpec = { 
 
    validator: function(value) { 
 
    return ["success", "info", "warning", "danger"].indexOf(value) >= 0; 
 
    }, 
 
    default: "danger" 
 
}; 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    pC: { 
 
     template: '#pc-template', 
 
     props: { 
 
     alertType: alertTypeSpec 
 
     }, 
 
     computed: { 
 
     classes() { //Compute the correct classes for the alert type 
 
      const classesObj = { 
 
      'alert-dismissible': this.dismissable 
 
      }; 
 
      const alertType = alertTypeSpec.validator(this.alertType) ? this.alertType : alertTypeSpec.default; 
 

 
      classesObj["alert-" + alertType] = true; //Problem if invalid 
 
      return classesObj; 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <p-c alert-type="success"></p-c> 
 
    <p-c alert-type="invalid"></p-c> 
 
    <p-c></p-c> 
 
</div> 
 

 
<template id="pc-template"> 
 
    <div>Alert type is {{alertType}}, classes is {{classes}}</div> 
 
</template>