Props interdependance in VueJS - vue.js

Question

I want to add some linking dependencies between my props in my VueJS component.
For example in my component on props declaration, i would like to stipulate that if a prop is present, then another one should be required, but not required at all if the previous props is not there.
props: {
url: {
type: String,
required: true,
},
isShared: {
type: Boolean,
default: false,
},
isSharedByOtherMember: {
type: Boolean,
default: false,
},
archivedId: {
type: String,
required: isSharedByOtherMember ? true : false, // This is not working, bit is there a way to do so ?
},
After reading vuejs docs :
Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions.
Is there a way to still do this in props declaration for better readability/understandability after ?
Thanks in advance

Answer 1

You could use the validator property for prop.
Vue docs has this example: (https://v2.vuejs.org/v2/guide/components-props.html#Prop-Validation)
// Custom validator function
propF: {
validator: function (value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
You could define a validator method in Vue methods section.
Something like this:
export default {
props: {
isSharedByOtherMember: {
type: Boolean,
default: false
},
archivedId: {
type: String,
default: null,
required: false,
validator: this.validateArchiveId(),
errorMessage: 'Archived ID required when isSharedByOtherMember has value of true.'
}
},
methods: {
validateArchiveId () {
return this.isSharedByOtherMember
}
}
}