javascript - 检查 prop 是否通过验证

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 计算属性中确定 alertType 属性是通过验证还是失败(理想情况下，如果失败则获取并使用默认值, 基于组件属性定义。

Answer 1

据我所知，不，您不能从组件内部引用 props 规范。不过，通过在组件定义之外定义 Prop 规范，您可以非常接近，这样您就可以在设置 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>