在另一个 props 的验证器中访问 props 值 [英] Access props value in another props' validator

问题描述

我想访问另一个 props 验证器中的 props 值:

道具:{类型: {类型:字符串，默认值:标准"},尺寸: {类型:字符串，默认值:正常"，验证器(值){//下面我想从上面访问 props `type`.return (this.type !== "caution" || this.type !== "primary") &&价值 !== 超级"}}}

但我收到TypeError:无法读取未定义的属性类型".有什么想法吗?

解决方案

prop 的 validator 中的 this 变量没有引用 Vue 实例.而且，不幸的是，没有真正的方法可以在 prop 的 validator 函数中引用另一个 prop 的值.

<小时>

你可以做的一件事是在 Vue 实例的 $props 对象上设置一个观察者，将 immediate 选项设置为 true 所以在创建组件时触发观察者.该观察者可以触发验证逻辑，其中 this 是对 Vue 实例的引用.

这是一个简单的例子:

Vue.config.productionTip = false;Vue.config.devtools = false;Vue.component('child', {模板:'<div></div>',道具: {类型: {类型:字符串，默认值:标准"},尺寸: {类型:字符串，默认值:正常"}},方法: {验证道具(){if ((this.type === "caution" || this.type === "primary") && this.size === "mega") {console.error('无效道具');}}},手表: {$道具:{立即:真实，处理程序(){this.validateProps();}}}});新的 Vue({el: '#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><child type="caution" size="mega"></child>

<小时>

另一种选择是将具有 type 和 size 属性的对象作为单个 prop 传递.这样，那个 prop 的 validator 就会引用这两个值.

Vue.config.productionTip = false;Vue.config.devtools = false;Vue.component('child', {模板:'<div></div>',道具: {配置:{类型:对象，默认值:() =>({ 类型:标准"，尺寸:正常"})，验证器({类型，大小}){return !((type === "caution" || type === "primary") && size === "mega");}}}});新的 Vue({el: '#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><child :config="{ type: 'caution', size: 'mega'}"></child>

<小时>

(还有一点要注意:您的验证逻辑可能不正确.正如所写的那样，括号中的语句将始终评估为 true.我在示例中更新了该逻辑，使我认为您意思是.)

I want to access a props value in another props' validator:

props: {
  type: {
    type: String,
    default: "standard"
  },
  size: {
    type: String,
    default: "normal",
    validator(value) {
      // below I want to access the props `type` from above.
      return (this.type !== "caution" || this.type !== "primary") && value !== "mega"
    }
  }
}

But I'm getting TypeError: Cannot read property 'type' of undefined. Any idea?

解决方案

The this variable in a prop's validator does not reference the Vue instance. And, unfortunately, there's no real way to reference another prop's value in a prop's validator function.

---

One thing you could do would be to set a watcher on the Vue instance's $props object, setting the immediate option to true so that the watcher fires when the component is created. That watcher could trigger the validation logic where this is a reference to the Vue instance.

Here's a simple example:

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('child', {
  template: '<div></div>',
  props: {
    type: {
      type: String,
      default: "standard"
    },
    size: {
      type: String,
      default: "normal"
    }
  },
  methods: {
    validateProps() {
      if ((this.type === "caution" || this.type === "primary") && this.size === "mega") {
        console.error('Invalid props');
      }
    }
  },
  watch: {
    $props: {
      immediate: true,
      handler() {
        this.validateProps();
      }
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child type="caution" size="mega"></child>
</div>

---

Another option would be to pass an object with a type and size property as a single prop. That way the validator of that prop would have a reference to both values.

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('child', {
  template: '<div></div>',
  props: {
    config: {
      type: Object,
      default: () => ({ type: "standard", size: "normal" }),
      validator({ type, size }) {
        return !((type === "caution" || type === "primary") && size === "mega");
      }
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child :config="{ type: 'caution', size: 'mega'}"></child>
</div>

---

(And just a note: your validation logic is probably incorrect. As it's written, the statement in parenthesis will always evaluate to true. I updated that logic in my examples to be what I think you meant.)

这篇关于在另一个 props 的验证器中访问 props 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！