Взаимозависимость опор в VueJS

Question

Я хочу добавить некоторые связывающие зависимости между моими реквизитами в моем VueJS компоненте.

Например, в моем компоненте в объявлении реквизита я хотел бы оговорить, что если пропс присутствует, то другой должно быть обязательным, но не обязательно, если предыдущие реквизиты отсутствуют.

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 ?
    },

После чтения vuejs docs :

Обратите внимание, что props проверяются до создания экземпляра компонента, поэтому свойства экземпляра (например, data, computed, et c) не будут доступны внутри функций по умолчанию или валидатора.

Есть ли способ сделать это в объявлении реквизита для лучшей читаемости / понятности после?

Заранее спасибо

Answer 1

Вы можете использовать свойство валидатора для prop.

Vue в документах есть этот пример: (https://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
  }
}

Можно определите метод валидатора в разделе методов Vue.

Примерно так:

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