Установите правило в зависимости от реквизита данных при вводе формы vueJS

Question

Я посмотрел на эту страницу: https://vuetifyjs.com/en/components/inputs

Я увидел, что можно настроить правила, например:

  rules: [
    value => !!value || 'Required.',
    value => (value || '').length <= 20 || 'Max 20 characters',
    value => {
      const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return pattern.test(value) || 'Invalid e-mail.'
    },
  ],

Однако я Мне было интересно, можно ли настроить правило в зависимости от компонента, например:

value => (value || '').length <= this.maxLength || 'Max ' + this.maxLength + ' characters'

Мой пример выше, конечно, не работает. Заранее спасибо:)

Answer 1

Да, это возможно. Ошибки, которые вы допустили

• rules, должны быть вычисляемым свойством, так как оно может изменить
• , вы должны вызвать его с родительским компонентом и передать prop maxLength

Вот рабочий пример для вас, где Validation - это компонент, реализующий rules, а App - родительский компонент, вызывающий его с помощью prop maxLength: https://codesandbox.io/s/nostalgic-thunder-mvl6o.