检查道具是否通过验证

Question

我有以下组件属性(它基本上是针对引导警报组件的(：

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

从某种意义上说，这很有效，如果我不提供警报类型，它会使用"危险"，但是如果我确实提供了警报类型并且它没有通过验证，那么 alertType 将设置为该值并发出控制台警告(据我了解这是预期行为(。

我的问题是，是否可以在classes计算属性中确定alertTypeprop 是通过还是失败验证(理想情况下，如果失败，则根据组件 prop 定义获取并使用默认值。

Answer 1

据我所知，不，您不能从组件中引用 props 规范。但是，通过在组件定义之外定义 prop 规范，您可以非常接近，以便您可以在设置 prop 和计算中使用它。

(无论出于何种原因，道具验证实际上似乎并没有在代码段中运行。不会生成警告。

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>