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

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

（无论出于何种原因，支持验证实际上似乎并未在代码段中运行。不会生成警告。）

＆＃13;

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

＆＃13;

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

＆＃13;

检查道具是否通过验证

1 个答案: