Блог

У меня есть следующий код в приложении Vue JS, где я пытаюсь изменить несколько условных классов в тексте, где текст меняет цвет в зависимости от значения счетчика:

  <span class="card__form__meter__warning" :class=" { weak : password_weak, 'very-weak' : password_veryweak, strong : password_strong, valid : password_verystrong } ">{{ password_warning }}</span>
  

Следующий код работает, но я чувствую, что это ужасный, повторяющийся способ сделать что-то, чего, вероятно, намного проще достичь:

 data: {
                name: null,
                emailAddress: null,
                password: null,
                password_warning: 'Strong password required',
                password_veryweak: false,
                password_weak: false,
                password_strong: false,
                password_verystrong: false,
                ...
  

                     if (this.meter == 0) {
                        this.password_veryweak = false
                        this.password_warning = 'Strong password required'
                    }

                    if ( this.meter == 25) {
                        this.password_warning = 'Very weak (not strong enough)'
                        this.password_veryweak = true
                        this.password_weak = false
                        this.password_strong = false
                        this.password_verystrong = false
                    } 
                    if (this.meter == 50 ) {
                        this.password_warning = 'Weak (not strong enough)'
                        this.password_weak = true
                        this.password_veryweak = false
                        this.password_strong = false
                        this.password_verystrong = false
                    } 
                     if (this.meter == 75) { 
                        this.password_warning = 'Strong'
                        this.password_strong = true
                        this.password_verystrong = false
                        this.password_weak = false
                        this.password_veryweak = false
                    } 
                    if (this.meter > 75) {
                        this.password_warning = 'Very Strong'
                        this.password_verystrong = true
                        this.password_strong = false
                        this.password_weak = false
                        this.password_veryweak = false
                    }
  

У меня были реальные проблемы с удалением предыдущих условных классов, когда значения счетчика изменились, поэтому я закончил настройку

                         this.password_weak = false
                        this.password_strong = false
                        this.password_verystrong = false
  

для каждого условия.

Я чувствую, что, вероятно, совершаю очень простую ошибку, поэтому любая помощь принимается с благодарностью.

Спасибо

——редактировать——-

 computed: {
                password_warning: function () {
                    if (this.meter == 0) {
                        this.password_class = ''
                        return 'Strong password required'
                    } else if (this.meter == 25) {
                        this.password_class = 'very-weak'
                        return 'Very weak (not strong enough)'
                    } else if (this.meter == 50) {
                        this.password_class = 'weak'
                        return  'weak (not strong enough)'
                    } else if (this.meter == 75) {
                        this.password_class = 'strong'
                        return 'Strong'
                    } else {
                        this.password_class = 'strong'
                        return 'Very strong' 
                    }
                },
            }
  

Не используйте условные классы из объектного литерала. Используйте одно свойство данных для хранения имени вашего класса и используйте его напрямую:

 <span class="card__form__meter__warning" :class="password_class">{{ password_warning }}</span>
  

Тогда код для настройки this.password_class становится довольно простым.

Я бы рекомендовал продолжить и даже создать оба password_class и password_warning вычисляемые свойства, которые являются производными от meter значения, вместо того, чтобы назначать их императивно.