Subscribe on changes!

Dependent props rules

avatar
Jan 25th 2022

What problem does this feature solve?

There are two attributes, width and height, which are not required. But if you pass width, you must pass height. In other words, the required options of height need to change with whether width is required

What does the proposed API look like?

let heightRequired = false;
const props = {
  width: {
    type: String,
    required: heightRequired,
  },
  height: {
    type: String,
    validator: (value) => {
      if (value) {
        // Height is required if it is a valid value
        heightRequired = true;
      } else {
        heightRequired = false;
      }
      return value;
    },
  },
};
avatar
Jan 25th 2022

You could use one prop and have it accept ob object like { height: number, width: number }

Or validate the combo in a computed property.

avatar
Jan 25th 2022

We likely shouldn't expand the props validation API in this way as it brings a lot of complexity, in my opinion. this can be solved in user land.