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

Я хочу добавить некоторые связывающие зависимости между моими реквизитами в моем компоненте 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:

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

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

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


vue.js vuejs2
person foufrix    schedule 13.07.2020    source источник
comment
Я бы предложил использовать значения по умолчанию для каждой зависимой опоры.   -  person AndrewShmig    schedule 13.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать свойство валидатора для свойства 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
    }
  }
}
person Olli Lappalainen    schedule 13.07.2020